Отображение двух разделов разных размеров рядом друг с другом html
Вот html-кодирование:
<div>
<section class="aboutus">
<div>Some content 1</div>
<div>Some more 1</div>
</section>
<section class="tripinfo">
<div>Some content 2</div>
<div>Some more 2</div>
</section>
</div>
Я хочу отображать разделы html рядом. Когда я это делаю, это работает:
div {float: left;}
div section {width: 50%; float: left;}
но когда я пытаюсь указать каждый из них как отдельный размер, как это, он не делает:
div {
float: left;
}
section .aboutus{
float: left;
width: 80%;
}
section .tripinfo{
float: left;
width: 20%
}
Как вы видете. В первом примере я делаю оба раздела 50 процентов в одном и том же блоке кода. Однако, как только я укажу размер каждого из них в разных классах, он завинчивается. Поэтому, если кто-нибудь из вас сможет мне помочь, это будет здорово.
Попробуйте использовать Flexbox вместо float.
#container{
display: flex;
border: 1px solid #333;
}
#container section {
padding: 10px;
}
.aboutus{
background: #CCC;
width: 80%;
}
.tripinfo {
background: #DDD;
width: 20%;
}
<div id="container">
<section class="aboutus">
<div>Some content 1</div>
<div>Some more 1</div>
</section>
<section class="tripinfo">
<div>Some content 2</div>
<div>Some more 2</div>
<div>Some more 2</div>
<div>Some more 2</div>
<div>Some more 2</div>
<div>Some more 2</div>
</section>
</div>
Видя некоторые ответы с хорошими предложениями, но никто действительно не указал, что на самом деле не так с вашим примером.
Вам не нужен div {float: left;}
. Он применяется к каждому отдельному элементу на странице и вызывает какое-то причудливое поведение.
Пространство в селекторе CSS указывает потомка, поэтому section.class
селектора section.class
применяется к любому .class
который является потомком section
. Если вы хотите, чтобы он применялся к элементам, которые являются section
и .class
, удалите пробел, например: section.class
Поплавки требуют clear
s. После каждого уровня плавающих элементов вам нужно включить clear: both;
чтобы элементы впоследствии отображались правильно. Это проще достигается путем выполнения ::after
псевдоэлемента, поэтому вам не нужно на самом деле очищать другой элемент на странице.
Обновленный пример:
div.float-container::after {
clear: both;
}
section.aboutus{
float: left;
width: 80%;
}
section.tripinfo{
float: left;
width: 20%
}
<div class="float-container">
<section class="aboutus">
<div>Some content 1</div>
<div>Some more 1</div>
</section>
<section class="tripinfo">
<div>Some content 2</div>
<div>Some more 2</div>
</section>
</div>
display: flex
упрощает работу практически во всех случаях, но это не всегда ответ. Я действительно чувствую, что иногда float
- это более быстрый и более сжатый подход к достижению простого результата.
добавить это свойство в элемент div
display:inline;
если он не работает, удалите float: слева от div и добавьте float: слева в первую секцию и покажите: inline для обоих разделов
Используйте display: flex
вместо использования float
, это будет намного проще и меньше строк кода.
Вы html и css должны быть:
.flex {
display: flex;
}
.aboutus {
width: 80%;
background: grey;
}
tripinfo {
width: 20%;
}
<div class="flex">
<section class="aboutus">
<div>Some content 1</div>
<div>Some more 1</div>
</section>
<section class="tripinfo">
<div>Some content 2</div>
<div>Some more 2</div>
</section>
</div>