Розділити поділ на 2 стовпці за допомогою CSS

Я намагався розділити div на дві колонки за допомогою CSS, але мені ще не вдалося змусити його працювати. Моя основна структура така:

<div id="content">
  <div id="left">
     <div id="object1"></div>
     <div id="object2"></div>
  </div>

  <div id="right">
     <div id="object3"></div>
     <div id="object4"></div>
  </div>
</div>

Якщо я спробую перемістити правий та лівий div у відповідні позиції (праворуч та ліворуч), здається, ігнорується колір фону вмісту div. А інший код, який я пробував з різних веб-сайтів, здається, не може перекласти в мою структуру.

Дякуємо за будь-яку допомогу!

Коли ви плаваєте ці два div, вміст div згортається до нульової висоти. Просто додайте

<br style="clear:both;"/>

після #right div, але всередині div div. Це змусить div вмісту оточувати два внутрішні плаваючі div.

Для мене це добре працює. Я розділив екран на дві половини: 20% та 80%:

<div style="width: 20%; float:left">
   #left content in here
</div>

<div style="width: 80%; float:right">
   #right content in there
</div>

Інший спосіб зробити це - додати overflow:hidden;до батьківського елемента плаваючі елементи.

переповнення: приховане змусить елемент зростати, щоб поміститися в плаваючі елементи.

Таким чином, це все можна зробити у css, а не додавати інший елемент html.

Найбільш гнучкий спосіб зробити це:

#content::after {
  display:block;
  content:"";
  clear:both;
}

Це діє точно так само, як додавання елемента до #content:

<br style="clear:both;"/>

але фактично не додаючи елемент. :: after називається псевдоелементом. Єдина причина, чому це краще, ніж додавання overflow:hidden;до #content, полягає в тому, що у вас можуть бути абсолютні позиціоновані дочірні елементи і переглядати їх. Також це дозволить поле-тіні все ще бути видимим.

Жодна з наданих відповідей не відповідає на вихідне запитання.

Питання в тому, як розділити div на 2 стовпці за допомогою css.

Усі наведені вище відповіді фактично вбудовують 2 div в один div, щоб імітувати 2 стовпці. Це погана ідея, оскільки ви не зможете передавати вміст у 2 стовпці будь-яким динамічним способом.

Отже, замість вищезазначеного, використовуйте один div, який визначається так, щоб містити 2 стовпці за допомогою CSS наступним чином ...

.two-column-div {
 column-count: 2;
}

призначити вищезазначене як клас для div, і він фактично перенесе свій вміст у 2 стовпці. Ви можете піти далі і також визначити розриви між полями. Залежно від вмісту div, можливо, вам доведеться возитися зі значеннями розбиття слів, щоб ваш вміст не розрізався між стовпцями.

З тієї причини, що мені ніколи не подобалися підходи до очищення, для таких речей я покладаюся на поплавки та відсотки ширини.

Ось щось, що працює в простих випадках:

#content { 
  overflow:auto; 
  width: 600px; 
  background: gray; 
} 

#left, #right { 
  width: 40%; 
  margin:5px; 
  padding: 1em; 
  background: white; 
} 

#left  { float:left;  }
#right { float:right; } 

Якщо ви вкладете якийсь вміст, ви побачите, що він працює:

<div id="content">
  <div id="left">
     <div id="object1">some stuff</div>
     <div id="object2">some more stuff</div>
  </div>

  <div id="right">
     <div id="object3">unas cosas</div>
     <div id="object4">mas cosas para ti</div>
  </div>
</div>

Ви можете побачити його тут: http://cssdesk.com/d64uy

Створіть дітям div, inline-blockі вони розмістять поруч:

#content {
   width: 500px;
   height: 500px;
}

#left, #right {
    display: inline-block;
    width: 45%;
    height: 100%;
}

Див. Демо

Я знаю, що ця публікація стара, але якщо хтось із вас все ще шукає більш простого рішення.

#container .left,
#container .right {
    display: inline-block;
}

#container .left {
    width: 20%;
    float: left;
}
#container .right {
    width: 80%;
    float: right;
}

Найкращий спосіб розділити div по вертикалі -

#parent {
    margin: 0;
    width: 100%;
}
.left {
    float: left;
    width: 60%;
}
.right {
    overflow: hidden;
    width: 40%;
}

Ви можете використовувати flexbox для управління макетом вашого елемента div:

* { box-sizing: border-box; }

#content {
  background-color: rgba(210, 210, 210, 0.5);
  border: 1px solid #000;
  padding: 0.5rem;
  display: flex;
}

#left,
#right {
  background-color: rgba(10, 10, 10, 0.5);
  border: 1px solid #fff;
  padding: 0.5rem;
  flex-grow: 1;
  color: #fff;
}

<div id="content">
  <div id="left">
     <div id="object1">lorem ipsum</div>
     <div id="object2">dolor site amet</div>
  </div>

  <div id="right">
     <div id="object3">lorem ipsum</div>
     <div id="object4">dolor site amet</div>
  </div>
</div>

Поплавки не впливають на потік. Що я, як правило, роблю, це додаю a

<p class="extro" style="clear: both">possibly some content</p>

в кінці "обгортання div" (в даному випадку вмісту). Я можу обгрунтувати це на семантичній основі, сказавши, що такий параграф може знадобитися. Інший підхід полягає у використанні CSS з чітким виправленням:

#content:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

#content {
  display: inline-block;
}
/*  \*/
* html #content {
  height: 1%;
}

#content {
  display: block;
}
/*  */

Хитрість із коментарями полягає у сумісності між браузерами.

На це найкраще відповісти тут Питання 211383

У наші дні будь-яка людина, що поважає себе, повинна використовувати заявлений підхід "мікро-чіткого виправлення" при очищенні поплавців.

1. Зробіть розмір шрифту рівним нулю в батьківському DIV.

2. Встановіть% ширини для кожного з дочірніх DIV.

   #content {
       font-size: 0;
   }
   
   #content > div {
       font-size: 16px;
       width: 50%;
   }
   

* У Safari вам може знадобитися встановити 49%, щоб це працювало.

Розділити поділ на два стовпці дуже просто, просто вкажіть ширину стовпця краще, якщо поставити це (наприклад, ширина: 50%) і встановити float: лівий для лівого стовпця і float: правий для правого стовпця.