Блог

Главная - Вопросы по программированию - Добавление Текста Неожиданно Толкает Контейнер Вниз

Добавление Текста Неожиданно Толкает Контейнер Вниз

#html #css

Вопрос:

Я разрабатываю веб-страницу, на которой два контейнера расположены рядом, и между ними нет промежутка. Контейнер слева занимает около 75% ширины, в то время как контейнер справа занимает около 25%.

Это мой текущий HTML и CSS код:

 <!doctype html>

<style>
.container-left {
  display: inline-block;
  width: 850px; 
  height: 550px;
  background: #E5F2FD; 
  margin-left: 100px;
  margin-top: 150px;
  text-align: center;
}

.welcome-message
{
    color: #026DBA;
    font-size: 25px;
    font-family: "Calibri";
}
.container-right {
  display: inline-block;
  width: 350px; 
  height: 550px; 
  background: #E5F2FD;
  margin-top: 150px;
  margin-right: 100px;
  text-align: center;   
}
</style>


<div class="container-left">

<p class="welcome-message"> Welcome back, Joe! </p>


</div><div class="container-right">

<p> Choose one... </p>

</div>


</html>

Если вы запустите этот код, добавление тега p, содержащего «С возвращением, Джо!», приведет к неожиданному перемещению контейнера справа вниз. Однако, если вы удалите эту строку кода, два контейнера снова будут встроены друг в друга. Мне интересно 1.) почему это так и 2.) как это решить.

Спасибо!

Комментарии:

1.Итак, я собирался переместить ваш код в исполняемый фрагмент, но, к сожалению, у вас есть некоторые основополагающие проблемы, которые необходимо решить в первую очередь, прежде чем мы сможем приступить к решению проблемы, с которой вы сталкиваетесь. Это: 1) Ваш код содержит закрывающий </html> тег, но не открывает <html> тег 2) У вас нет документа <head /> или документа <body /> . FWIW, как правило, вы можете опустить этот шаблон во фрагментах, но они должны присутствовать в вашем исходном коде.

2. Кроме того, их удаление изменило выводимые данные во фрагменте, поэтому я решил не вносить изменения.

Ответ №1:

Самое простое решение-изменить их свойства ширины на максимальную ширину, гораздо лучшим решением был бы flexbox

 <style>

.container {
display: flex;
flex-flow: row wrap;
}

.column-left {
flex: .75;
}

.column-right {
flex:.25;
}
</style>
<body class=“container”>
<div class=“column-left”></div>

<div class=“column-right”></div>

</body>

есть лучшие примеры, но в основном вы перемещаете правый контейнер вниз, потому что левый контейнер имеет ширину 75%, а это означает, что ему нужно расширить еще на 25% больше

Метки: