Почему эти четыре divs не отображаются в одной строке?

Question

Я хочу, чтобы четыре divs отображались на одной строке. Я могу сделать три из них сделать это, но другой не будет, если я не сделаю общую ширину, что четыре divs занимают менее 100%.

Этого не должно быть, правда, правда? Они должны уметь, в общей сложности, занимать 100% ширины страницы, если нет ничего «на пути»? Ниже приведен фрагмент моего кода, что я имею в виду.

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
html, 
 
body { 
 
    overflow: hidden; 
 
    font-size: 10px; 
 
} 
 
.wrapper { 
 
    position: absolute; 
 
    bottom: 0; 
 
    width: 100%; 
 
    margin-bottom: 0.5%; 
 
    margin-left: 0.5%; 
 
    margin-right: 0.5%; 
 
} 
 
.inner { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    width: 25%; 
 
} 
 
.half { 
 
    width: 12.5%; 
 
}

<div class="wrapper"> 
 
    <div class="inner" style="background-color: red;">Div 1</div> 
 
    <div class="inner" style="background-color: blue;">Div 2</div> 
 
    <div class="inner" style="background-color: green;">Div 3</div> 
 
    <div class="inner"> 
 
    <div class="inner half" style="background-color: purple;">Div 4 - First Half</div> 
 
    <div class="inner half" style="background-color: Teal;">Div 4 - Second Half</div> 
 
    </div> 
 
</div>

Я не проверил, чтобы убедиться, совместив дивы на одной и той же линии, используя float: left будет иметь значение проблемы, как мне нужно использовать display: inline-block для выравнивания других бедрам дивы в моем фактическом коде.

Значит ли кто-нибудь знает, как получить последний, чтобы появиться на одной строке?

Answer 1

Потому что вам нужно добавить float: left; к внутреннему, чтобы заставить его вести себя так, как ожидалось.

Также Адам прав, 12,5% будет составлять 12,5% от уже имеющегося контейнера шириной 25%. Я удалил внутренний класс из половины divs и изменил их ширину на 50%.

* { 
 
    margin: 0; 
 
    padding: 0; 
 
    box-sizing: border-box; 
 
} 
 

 
html, 
 
body { 
 
    overflow: hidden; 
 
    font-size: 10px; 
 
} 
 

 
.wrapper { 
 
    position: absolute; 
 
    bottom: 0; 
 
    width: 100%; 
 
    margin-bottom: 0.5%; 
 
    margin-left: 0.5%; 
 
    margin-right: 0.5%; 
 
} 
 

 
.inner { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    width: 25%; 
 
    float:left; 
 
} 
 

 
.half { 
 
    float:left; 
 
    width: 50%; 
 
}

<div class="wrapper"> 
 
    <div class="inner" style="background-color: red;">Div 1</div> 
 
    <div class="inner" style="background-color: blue;">Div 2</div> 
 
    <div class="inner" style="background-color: green;">Div 3</div> 
 
    <div class="inner"> 
 
    <div class="half" style="background-color: purple;">Div 4 - First Half</div> 
 
    <div class="half" style="background-color: Teal;">Div 4 - Second Half</div> 
 
    <div style="clear:both;"></div> 
 
    </div> 
 
</div>

Answer 2

Ваш CSS-doenst содержит класс, называемый «внутренняя половина», поэтому вы объединяете два. У вас многократная ширина. Ваши первые звонки внутренние, поэтому требуется 25% + 12,55

Answer 3

Попробуйте clearfix. Просто примените class="clearfix" к родительскому элементу. Это самый простой и более современный способ по сравнению с поплавками. Большим преимуществом является то, что вы можете повторно использовать его по всему HTML DOM намного проще, чем подход, который вы принимаете.

.clearfix:after { 
    visibility: hidden; 
    display: block; 
    font-size: 0; 
    content: " "; 
    clear: both; 
    height: 0; 
} 
.clearfix { display: inline-block; } 
/* start commented backslash hack \*/ 
* html .clearfix { height: 1%; } 
.clearfix { display: block; } 
/* close commented backslash hack */