CSS3 calc для получения 100% -ной ширины

Question

может кто-нибудь объяснить, почему div не вписывается в одну строку? Все div имеют ширину 20% минус 20px. Первые четыре div имеют правое поле 25px. 20 * 5 = 100px 25 * 4 = 100px

Я не понимаю.

HTML:

<div class="one-fifth"> 
1 
</div> 

<div class="one-fifth"> 
2 
</div> 

<div class="one-fifth"> 
3 
</div> 

<div class="one-fifth"> 
4 
</div> 

<div class="one-fifth"> 
5   
</div> 

CSS:

.one-fifth{ 
    width:calc(20% - 20px); 
    display:inline-block; 
    background-color:red; 
} 
.one-fifth:not(:last-child){ 
    margin-right:25px; 
} 

Здесь JSFiddle: https://jsfiddle.net/d6dw7bcL/1/

Спасибо!

Answer 1

Пространства добавляют ширину.

Комментарий их так:

</div><!-- 

--><div> 

См работает пример here.

Но комментарии - это самый простой способ сделать это. Есть много других методов (некоторые из других ответов здесь) объяснены на CSS-Tricks.com.

Answer 2

Обычно я использую комментарии для визуального разделения divs, но сохраняю их без пробелов. Как это:

<div class="one-fifth">1</div><!-- 
--><div class="one-fifth">2</div><!-- 
--><div class="one-fifth">3</div><!-- 
--><div class="one-fifth">4</div><!-- 
--><div class="one-fifth">5</div> 

Answer 3

Действительно пробельные после DIV проблема. Для того, чтобы удалить пробелы только с помощью CSS вы можете просто float элементы:

.one-fifth { 
    float: left; 
} 

JSFiddle

Answer 4

Первоначально я думал, что проблема с запасом, но реальная проблема с инлайн-блок. Если вам действительно нужно использовать встроенный блок, вы можете выбрать некоторые решения, изменяющие html-код, и использовать комментарии для удаления этого интервала. Я бы скорее определил эту ответственность для CSS, поэтому вы можете определить родительский div с размером шрифта: 0 и переопределить размер шрифта в ваших div. Смотрите этот пример

body { 
 
    margin: 0; 
 
} 
 
.parent { 
 
    font-size: 0; 
 
} 
 
.one-fifth { 
 
    width: calc(20% - 20px); 
 
    display: inline-block; 
 
    background-color: red; 
 
    letter-spacing: 0; 
 
    font-size:12px; 
 
} 
 
.one-fifth:not(:last-of-type) { 
 
    margin-right: 25px; 
 
}

<div class="parent"> 
 
    <div class="one-fifth"> 
 
    1 
 
    </div> 
 

 
    <div class="one-fifth"> 
 
    2 
 
    </div> 
 

 
    <div class="one-fifth"> 
 
    3 
 
    </div> 
 

 
    <div class="one-fifth"> 
 
    4 
 
    </div> 
 

 
    <div class="one-fifth"> 
 
    5 
 
    </div> 
 
</div>