Как настроить пробелы между элементами в макете inline-блока?
Вы должны сделать это так, как вы описали. MongoDB является нереляционной базой данных и не поддерживает объединения.
2 ответа
Добавьте скрытый элемент, чтобы вызвать выравнивание justify для последней строки, но вам нужно будет использовать отрицательный margin-bottom, чтобы удалить добавленную дополнительную строку.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.wrapper {
text-align : justify;
}
.wrapper > div {
display: block;
margin-top: 5px;
}
.header {
background: lightgreen;
margin-top: 0;
}
.footer {
background: #eee;
}
.main > div {
display: inline-block;
width: 49%;
height: 20vh;
background: #eee;
}
.main:after {
content:"";
display:inline-block;
width:5%;
height:50px; /* we consider a bigger value than the line-height*/
}
.main {
margin-bottom:-50px; /*the same value defined in the pseuo element*/
}<div class="wrapper">
<div class="header">header</div>
<div class="main">
<div class="item">item1</div>
<div class="item">item2</div>
<div class="item">item3</div>
<div class="item">item4</div>
</div>
<div class="footer">footer</div>
</div> Или используйте трюк font-size:0, чтобы избежать этой лишней строки:
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.wrapper {
text-align : justify;
}
.wrapper > div {
display: block;
margin-top: 5px;
}
.header {
background: lightgreen;
margin-top: 0;
}
.footer {
background: #eee;
}
.main > div {
display: inline-block;
width: 49%;
height: 20vh;
background: #eee;
font-size:initial;
}
.main:after {
content:"";
display:inline-block;
width:5%;
}
.main {
font-size:0;
}<div class="wrapper">
<div class="header">header</div>
<div class="main">
<div class="item">item1</div>
<div class="item">item2</div>
<div class="item">item3</div>
<div class="item">item4</div>
</div>
<div class="footer">footer</div>
</div> Я не думаю, что вы можете достичь этого, не устанавливая интервал. Как вы, вероятно, знаете, вы можете лучше контролировать макеты встроенных блоков, устанавливая отрицательный межбуквенный интервал в контейнере и сбрасывая элемент: .main {letter-spacing: -4px} .item {letter-spacing: 0} (вам нужно проверить, работает ли 4px).
Или (поскольку мы не используем flex :), вы можете плавать нечетные и четные деления влево и вправо: .item:nth-child(odd) {clear: left; float: left} .item:nth-child(even) {float: right}