элементов не отображаются встроенные

Question

У меня есть два div элементов оформленных со следующими свойствами:

.elem1 { 
    width: 47.5%; 
    margin-right: 2.5%; 
    display: inline-block; 
} 

.elem2 { 
    width: 47.5%; 
    margin-right: 2.5%; 
    display: inline-block; 
} 

Примечания: Если я уменьшить маржу до 2.25%элементы расположены в линии, когда родитель являетсяbody. Если тогда я оберну их в другой div, который уже, второй элемент снова разрывается на следующую строку.

С общей суммы в 100% из родителя widthпочему элементы не расположены в линию и как я могу решить эту проблему, так, что они расположены встроенный во все времена?

я принципиально хочу поплавка их без использования свойства float.

Вы можете проверить следующие скрипки для лучшего визуального представления:

• The parent element is the body.
• The parent element is the body and the margin is reduced to 2.35%.
• The parent element is another div that has 75% of the body's width.

Это необходимо, чтобы решение только и только в CSS в двух elem элементов как там не может быть родительским контейнером, установленным пользователем.

Answer 1

После некоторых исследований я оказался в пользу использования отрицательный запас так, как в настоящее время это наиболее поддерживаемый способ в отличие от других хороших, рабочих растворов, предоставленных (font-size: 0;, display: flex).

Для того, чтобы сделать его работу, я добавил следующее:

.elem2 { 
    margin-left: calc(2.5% - 4px); 
} 

Answer 2

display: inline-block; есть пробел после этого по умолчанию. Чтобы удалить его, используйте font-size: 0 для: .container

Отделы example.

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.container { 
 
    width: 75%; 
 
    font-size: 0; 
 
    border: 1px solid red; 
 
    margin: 0 auto; 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 

 
.elem1 { 
 
    width: 47.5%; 
 
    margin-right: 2.25%; 
 
    display: inline-block; 
 
} 
 

 
.elem2 { 
 
    width: 47.5%; 
 
    margin-right: 2.25%; 
 
    display: inline-block; 
 
}

<div class="container"> 
 
    <div class="elem1" style="height: 50px; background-color: black;"></div> 
 
    <div class="elem2" style="height: 50px; background-color: black;"></div> 
 
</div>

Here большая статья об этом промежутки между строками текста.

Answer 3

Встроенные элементы позволяют писать обычный текст, поэтому из-за разрыва строки предполагается, что вы добавили пространство между элементами div. Это вызывает дополнительное пространство между элементами div, которое приводит к тому, что элементы div не подходят в одной строке. Обычно я добавляю комментарий между элементами, чтобы переопределить это поведение, а также служить напоминанием для себя и других, которые могут смотреть на код.

<div class="elem1" style="height: 50px; background-color: black;"></div><!-- 
    This comment is added to prevent space in-between these elements. 
--><div class="elem2" style="height: 50px; background-color: black;"></div> 

Answer 4

Если у вас есть поддержка браузера, вы можете добавить display: flex к охватывающему элементу.В этом примере я положил его на body.

body { 
 
    display: flex; 
 
} 
 

 
.elem1 { 
 
    width: 47.5%; 
 
    margin-right: 2.5%; 
 
    display: inline-block; 
 
} 
 

 
.elem2 { 
 
    width: 47.5%; 
 
    margin-right: 2.5%; 
 
    display: inline-block; 
 
}

<div class="elem1" style="height: 50px; background-color: black;"></div> 
 
<div class="elem2" style="height: 50px; background-color: black;"></div>

Он работает с третьим примером тоже. Я добавил display: flex в .container.

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.container { 
 
    width: 75%; 
 
    border: 1px solid red; 
 
    margin: 0 auto; 
 
    position: relative; 
 
    display: flex; 
 
} 
 

 
.elem1 { 
 
    width: 47.5%; 
 
    margin-right: 2.25%; 
 
    display: inline-block; 
 
} 
 

 
.elem2 { 
 
    width: 47.5%; 
 
    margin-right: 2.25%; 
 
    display: inline-block; 
 
}

<div class="container"> 
 
    <div class="elem1" style="height: 50px; background-color: black;"></div> 
 
    <div class="elem2" style="height: 50px; background-color: black;"></div> 
 
</div>