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

Question 1

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

Question 2

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

Question 3

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

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

Question 4

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

display:inline;

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

Question 5

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

Chris Barr · Answer 1 · 2017-11-22T22:52:00+03:00