正如我所知,我显示了一系列div内联代码块(左右边距为5%),一旦达到第一行div的限制,其余的div就会自动转到第二行,依此类推(您知道,而不是溢出父级)。但是,此行为的细节很小,第二行的元素与第一行的元素未水平对齐。我知道这是由于边距引起的,但我仍然不知道如何使所有元素等距。以下代码代表了本节的体系结构。
.parent_div {
width: 75%;
float: right;
/* The "parent of the parent" has its clearfix class*/
}
.child_div {
margin-left: 5%;
margin-right: 5%;
display: inline-block;
}
h4 {
display: inline-block;
}
p {
display: inline-block;
}
}
<div class="parent_div">
<div class="child_div">
<h4>Some text: </h4>
<p>some info.</p>
</div>
<div class="child_div">
<h4>Some text: </h4>
<p>some info.</p>
</div>
<div class="child_div">
<h4>Some text: </h4>
<p>some info.</p>
</div>
<div class="child_div">
<h4>Some text: </h4>
<p>some info.</p>
</div>
<div class="child_div">
<h4>Some text: </h4>
<p>some info.</p>
</div>
</div>
您可以在此处再次看到div的结构,还可以观察到下面的div与上面的div不对齐。
答案 0 :(得分:2)
这也是由于页边距,但主要是因为每个div中内容的长度不同。我可以想到的最好方法就是使用网格。
.parent_div {
width: 75%;
float: right;
display: grid;
grid-gap: 2%;
grid-template-columns: repeat(auto-fill, minmax(300px, max-content));
}
.parent_div .child_div h4 {
display: inline-block;
}
.parent_div .child_div p {
display: inline-block;
}
<div class="parent_div">
<div class="child_div">
<h4>Some text111: </h4> <p>some info 3234r32.</p>
</div>
<div class="child_div">
<h4>Some text22: </h4> <p>some info 34.</p>
</div>
<div class="child_div">
<h4>Some text 232434: </h4> <p>some infods 33.asr23</p>
</div>
<div class="child_div">
<h4>Some text 3243: </h4> <p>some infodsf s34.</p>
</div>
<div class="child_div">
<h4>Some text33: </h4> <p>some infodfc fdsf342.</p>
</div>
<div class="child_div">
<h4>Some text22: </h4> <p>some info 34.</p>
</div>
<div class="child_div">
<h4>Some text 3243 234234: </h4> <p>some infodsf s34.sd</p>
</div>
<div class="child_div">
<h4>Some text33: </h4> <p>some infodfc fdsf342.</p>
</div>
<div class="child_div">
<h4>Some text22: </h4> <p>some info 34.</p>
</div>
</div>
答案 1 :(得分:1)
一种简单的修改方法是设置最小宽度,以使列的宽度至少x%-在摘要中,div一次在行上显示两个,占总宽度的75% ,并且每个孩子的最小宽度为35%。这样,孩子就可以正确对齐并具有相同的宽度。
.parent_div {
width: 75%;
float:right;
/* The "parent of the parent" has its clearfix class*/
}
.child_div {
margin: 0 5%;
display: inline-block;
min-width:35%;
}
h4, p {
display: inline-block;
}
<div class="parent_div">
<div class="child_div">
<h4>Some text: How on earth? </h4>
<p>Dunno... seriously</p>
</div>
<div class="child_div">
<h4>Some text: Where?</h4>
<p>There on the stair</p>
</div>
<div class="child_div">
<h4>Some text: my name </h4>
<p>Rachel.</p>
</div>
<div class="child_div">
<h4>Some text:Hi there </h4>
<p>Nice day</p>
</div>
<div class="child_div">
<h4>Some text: hello </h4>
<p>it's August</p>
</div>
</div>