Два вбудовані блокові елементи, кожен із шириною 50%, не поміщаються поруч в один ряд

Question 1

<!DOCTYPE html>
<html>
<head>
<title>Width issue</title>
<style type="text/css">
body {
    margin: 0;
}
#left {
    width: 50%;
    background: lightblue;
    display: inline-block;
}
#right {
    width: 50%;
    background: orange;
    display: inline-block;
}
</style>
</head>
<body>
    <div id="left">Left</div>
    <div id="right">Right</div>
</body>
</html>

JSFiddle: http://jsfiddle.net/5EcPK/

Наведений вище код намагається розмістити #left div і #right div, поруч, в одному рядку. Але, як ви можете бачити у наведеній вище URL-адресі JSFiddle, це не так.

Я можу вирішити проблему, зменшивши ширину одного з div до 49%. Див. Http://jsfiddle.net/mUKSC/ . Але це не є ідеальним рішенням, оскільки між двома розділами з'являється невеликий проміжок.

Інший спосіб вирішити проблему - це плаваючи обидва div. Див. Http://jsfiddle.net/VptQm/ . Це чудово працює.

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

Question 2

При використанні inline-blockелементів завжди виникатиме whitespace проблема між цими елементами (цей простір становить приблизно ~ 4 пікселі).

Отже, ваші два divs, у яких обидва мають ширину 50%, плюс це whitespace(~ 4px) більше 100% в ширину, і тому він ламається. Приклад вашої проблеми:

Показати фрагмент коду

body{
  margin: 0; /* removing the default body margin */
}

div{
  display: inline-block;
  width: 50%;
}

.left{
  background-color: aqua;
}

.right{
  background-color: gold;
}

<div class="left">foo</div>
<div class="right">bar</div>

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

Є кілька способів виправити це:

1. Немає простору між цими елементами

Показати фрагмент коду

body{
  margin: 0; /* removing the default body margin */
}

div{
  display: inline-block;
  width: 50%;
}

.left{
  background-color: aqua;
}

.right{
  background-color: gold;
}

<div class="left">foo</div><div class="right">bar</div>

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

2. Використання HTML-коментарів

Показати фрагмент коду

body{
  margin: 0; /* removing the default body margin */
}

div{
  display: inline-block;
  width: 50%;
}

.left{
  background-color: aqua;
}

.right{
  background-color: gold;
}

<div class="left">foo</div><!--
--><div class="right">bar</div>

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

3. Встановіть для батьків font-sizeзначення 0, а потім додайте деяке значення inline-blockелементам

Показати фрагмент коду

body{
  margin: 0; /* removing the default body margin */
}

.parent{
  font-size: 0;  /* parent value */
}

.parent > div{
  display: inline-block;
  width: 50%;
  font-size: 16px; /* some value */
}

.left{
  background-color: aqua;
}

.right{
  background-color: gold;
}

<div class="parent">
  <div class="left">foo</div>
  <div class="right">bar</div>
</div>

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

4. Використання від’ємного запасу між ними ( не переважно )

Показати фрагмент коду

body{
  margin: 0; /* removing the default body margin */
}

div{
  display: inline-block;
  width: 50%;
  margin-right: -4px; /* negative margin */
}

.left{
  background-color: aqua;
}

.right{
  background-color: gold;
}

<div class="left">foo</div>
<div class="right">bar</div>

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

5. Падіння кута закриття

Показати фрагмент коду

body{
  margin: 0; /* removing the default body margin */
}

div{
  display: inline-block;
  width: 50%;
}

.left{
  background-color: aqua;
}

.right{
  background-color: gold;
}

<div class="left">foo</div
><div class="right">bar</div>

<hr>

<div class="left">foo</div><div class="right">
bar</div>

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

6. Пропуск певних закриваючих тегів HTML (спасибі @thirtydot за посилання )

Показати фрагмент коду

body{
  margin: 0; /* removing the default body margin */
}

ul{
  margin: 0; /* removing the default ul margin */
  padding: 0; /* removing the default ul padding */
}

li{
  display: inline-block;
  width: 50%;
}

.left{
  background-color: aqua;
}

.right{
  background-color: gold;
}

<ul>
  <li class="left">foo
  <li class="right">bar
</ul>

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

Список літератури:

Як @ MarcosPérezGude сказав , то кращий спосіб полягає у використанні rem, а також додати значення по замовчуванням деякі font-sizeна htmlмітці (наприклад , в HTML5Boilerplate ). Приклад:

html{
    font-size: 1em;
}

.ib-parent{             /* ib -> inline-block */
    font-size: 0;
}

.ib-child{
    display: inline-block;
    font-size: 1rem;
}

Оновлення : оскільки вже майже 2018 рік, використовуйте flexbox або навіть краще - макет сітки CSS .

Question 3

хороша відповідь у css3:

white-space: nowrap;

у батьківському вузлі та:

white-space: normal;
vertical-align: top;

в div (або інший) на 50%

приклад: http://jsfiddle.net/YpTMh/19/

РЕДАГУВАТИ:

є інший спосіб:

font-size: 0;

для батьківського вузла та перевизначити його у дочірньому вузлі

Question 4

Це тому, що пробіл між двома div-файлами інтерпретується як пробіл. Якщо ви поставите свої <div>теги в один ряд, як показано нижче, проблема виправлена :

<div id="left"></div><div id="right"></div>

Question 5

Тому що між елементами є простір. Якщо видалити всі пробіли, вони помістяться .

<div id="left">Left</div><div id="right">Right</div>

Question 6

Або змусьте їх блокувати замість вбудованого блоку. Це призведе до того, що divs ігнорує пробіли між ними.

display:block;

або видалити пробіл між тегами

<div id='left'></div><div id='right'></div>

або додати

margin: -1en;

до одного з div, щоб зменшити простір, зайнятий одержуваним одиничним пробілом.

Question 7

Будь ласка, перевірте код нижче:

body {
    margin: 0;
}
#left {
    width: 50%;
    background: lightblue;
    display: inline-block;
    float:left;
}
#right {
    width: 50%;
    background: orange;
    display: inline-block;
    float:left;
}

<div id="left">Left</div>
<div id="right">Right</div>

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

Question 8

Приклад Flexbox - це буде використано для батьківського класу, що утримує два бокові елементи.

.parentclass {
  display: flex;
  justify-content: center;
  align-items: center; 
}

Взято з вертикального центрування div всередині іншого div

Question 9

Це можна зробити, додавши css display: inline до div, який містить вбудовані елементи.

При видаленні пробілу за допомогою поля з від’ємним значенням стає необхідним додавати його до цього конкретного елемента. Оскільки додавання його до класу вплине на місця, де цей клас використовувався.

Тож було б безпечніше використовувати display: inline;

Question 10

додати float: ліворуч; до обох тегів div.

div {
  float: left;
}

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