Отображение двух разделов разных размеров рядом друг с другом html

58
5

Вот 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 процентов в одном и том же блоке кода. Однако, как только я укажу размер каждого из них в разных классах, он завинчивается. Поэтому, если кто-нибудь из вас сможет мне помочь, это будет здорово.

спросил(а) 2017-11-22T22:48:00+03:00 3 года назад
1
Решение
72

Попробуйте использовать 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>

ответил(а) 2017-11-22T22:52:00+03:00 3 года назад
41

Видя некоторые ответы с хорошими предложениями, но никто действительно не указал, что на самом деле не так с вашим примером.

Вам не нужен 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 - это более быстрый и более сжатый подход к достижению простого результата.

ответил(а) 2017-11-22T23:00:00+03:00 3 года назад
41

добавить это свойство в элемент div

display:inline;

если он не работает, удалите float: слева от div и добавьте float: слева в первую секцию и покажите: inline для обоих разделов

ответил(а) 2017-11-22T22:55:00+03:00 3 года назад
42

Используйте 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>

ответил(а) 2017-11-22T22:52:00+03:00 3 года назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема