Як змусити цих двох дивок поруч?

110

У мене є дві діви, які не вкладені, одна нижче іншої. Вони обидва в межах одного батьківського діла, і цей батьківський діл повторюється. Отже, по суті:

<div id='parent_div_1'>
  <div class='child_div_1'></div>
  <div class='child_div_2'></div>
</div>

<div id='parent_div_2'>
  <div class='child_div_1'></div>
  <div class='child_div_2'></div>
</div>

<div id='parent_div_3'>
  <div class='child_div_1'></div>
  <div class='child_div_2'></div>
</div>

Я хочу отримати кожну пару child_div_1та child_div_2поруч. Як я можу це зробити?

css layout html

— Джастін Мельцер
джерело

82

#parent_div_1, #parent_div_2, #parent_div_3 {
  width: 100px;
  height: 100px;
  border: 1px solid red;
  margin-right: 10px;
  float: left;
}
.child_div_1 {
  float: left;
  margin-right: 5px;
}

Перевірте приклад роботи на веб-сайті http://jsfiddle.net/c6242/1/

— Хусейна
джерело

1

Він хоче, щоб діти розділилися поруч один з одним, а не батьки (принаймні, так я зрозумів ...)

— ehdv

4

Я все ще думаю display: table-cell, що отримає результати ближче до того, що він має на увазі (з тих пір вони будуть мати однакову висоту etcetera), але цей спосіб обов'язково спрацює.

— ehdv

@ehdv display: table-cellне підтримується в IE6 IE7. поплавок: зліва; це правильний спосіб зробити це.

— Хусейн

Насправді це правильний спосіб зробити це в IE6,7 <tr><td>, тому що будь-який інший варіант буде порушений , коли користувач змінить розмір вікна. У сучасних браузерах, display: inline-blockяк правило, найкращий варіант.

— Джон Генкель

126

Оскільки діви за замовчуванням є blockелементами - це означає, що вони будуть займати повну доступну ширину, спробуйте використовувати -

display:inline-block;

divТепер виявляються інлайн тобто не порушує потік елементів, але по- як і раніше буде розглядатися в якості елемента блоку.

Я вважаю цю техніку простішою, ніж боротьба з floats.

Докладніше див. У цьому підручнику - http://learnlayout.com/inline-block.html . Я б рекомендував навіть попередні статті, які ведуть до цієї. (Ні, я цього не писав)

— Робін Мабен
джерело

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

— Кріс

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

— Робін Мабен

2

Я згоден. Це набагато краще, ніж float:leftтому, що дає вам так багато варіантів, не переробляючи весь ваш макет. Речі "просто діють" таким чином. Перевірте це тут: jsfiddle.net/SrAQd/4

— Джеррі

12

Для того, щоб отримати вертикальне вирівнювання, я додав би "вертикальне вирівнювання: верх;"

— cdiggins

@Chris: Так, я згоден із cdiggins. Це повинно вам допомогти.

— Робін Мабен

44

Я вважав, що наведений нижче код є дуже корисним, він може допомогти всім, хто приходить шукати сюди

<html>
<body>
    <div style="width: 50%; height: 50%; background-color: green; float:left;">-</div>
    <div style="width: 50%; height: 50%; background-color: blue; float:right;">-</div>
    <div style="width: 100%; height: 50%; background-color: red; clear:both">-</div>
</body>
</html>

Розгорніть фрагмент

— сокири
джерело

11

Використовувати flexbox - це дуже просто!

#parent_div_1, #parent_div_2, #parent_div_3 {
    display: flex;
}

Приклад скрипки

— Сол
джерело

6

Використання стилю

.child_div_1 {
    float:left
}

— amit_g
джерело

5

Найкраще, що працює для мене:

 .left{
   width:140px;
   float:left;
   height:100%;
 }

 .right{
   margin-left:140px;
 }

http://jsfiddle.net/jiantongc/7uVNN/

— jiantongc
джерело

2

float:leftВластивість користувача в класі дочірніх дітей

Детально перевірити структуру div: http://www.dzone.com/links/r/div_table.html

— Пранай Рана
джерело

2

Використання флексу

   #parent_div_1{
     display:flex;
     flex-wrap: wrap;
  }

— дасфдса
джерело