我在父 div
中有多个子 div
。它可能是最小 2 到最大 8。我将子 div
的宽度固定为 25%。问题是当有 2 或 3 个子 div
时,首先 50% 或 75% 的父 div
用于显示这些 div
秒。但是我想使用父 div
的中心 50% 或 75% 来显示这些 div
。如果有超过 4 个子 div
,那么我想显示父行的第一行而不做任何更改,并希望对第 5 个 div
使用居中 25%,居中 50 % 用于第 5 和 6,居中 75% 用于第 5、6 和 7 格。
HTML:
<div class="container">
<p>Block1</p>
<div class="banner">
<div class="block1">
<img src="hoels.png" />
<p>Banquet Halls</p>
</div>
<div class="block1">
<img src="hoels.png" />
<p>Resorts</p>
</div>
<div class="block1">
<img src="hoels.png" />
<p>Hotels</p>
</div>
---------------------------
---------------------------
---------------------------
</div>
</div>
CSS:
.container{
width:100%;
margin:0 auto;
max-width:991px;
}
.banner{
padding:20px;
}
.block1{
float:left;
width:33%;
text-align:center;
}
.block1 img{
width:100%;
max-width:100px;
}
fiddle : https://jsfiddle.net/7fpt4m5e/2/
最佳答案
方法 #01(使用 Flexbox):
您可以使用 css3 flexbox
.在父元素上添加以下 css:
.banner {
justify-content: center;
flex-wrap: wrap;
display: flex;
}
注意:您需要从子元素中移除float
,就像flexbox
一样没必要。
.container{
width:100%;
margin:0 auto;
max-width:991px;
}
.banner{
justify-content: center;
flex-wrap: wrap;
display: flex;
padding:20px;
}
.block1{
background: green;
width:25%;
text-align:center;
}
.block1 img{
width:100%;
max-width:100px;
}
<div class="container">
<p>Block1</p>
<div class="banner">
<div class="block1">
<img src="hoels.png" />
<p>Banquet Halls</p>
</div>
<div class="block1">
<img src="hoels.png" />
<p>Resorts</p>
</div>
<div class="block1">
<img src="hoels.png" />
<p>Hotels</p>
</div>
<div class="block1">
<img src="hoels.png" />
<p>Farm Houses</p>
</div>
<div class="block1">
<img src="hoels.png" />
<p>Farm Houses</p>
</div>
<div class="block1">
<img src="hoels.png" />
<p>Farm Houses</p>
</div>
</div>
</div>
方法 #02(没有 Flexbox):
您可以在子元素上使用display: inline-block
。由于我们可以使用 text-align
center 属性影响 inline
和 inline-block
元素,因此我们将使用这个技巧使子元素居中对齐。
添加以下CSS:
/* Following css should be added on parent */
.banner {
text-align: center;
letter-spacing: -4px;
font-size: 0;
}
/* Following css should be added on child elements */
.block1{
letter-spacing: 0;
font-size: 14px;
width:25%;
display: inline-block;
vertical-align: top;
}
.container{
width:100%;
margin:0 auto;
max-width:991px;
}
.banner{
text-align: center;
letter-spacing: -4px;
font-size: 0;
padding:20px;
}
.block1{
letter-spacing: 0;
background: green;
font-size: 14px;
width:25%;
text-align:center;
display: inline-block;
vertical-align: top;
}
.block1 img{
width:100%;
max-width:100px;
}
<div class="container">
<p>Block1</p>
<div class="banner">
<div class="block1">
<img src="hoels.png" />
<p>Banquet Halls</p>
</div>
<div class="block1">
<img src="hoels.png" />
<p>Resorts</p>
</div>
<div class="block1">
<img src="hoels.png" />
<p>Hotels</p>
</div>
<div class="block1">
<img src="hoels.png" />
<p>Farm Houses</p>
</div>
<div class="block1">
<img src="hoels.png" />
<p>Farm Houses</p>
</div>
<div class="block1">
<img src="hoels.png" />
<p>Farm Houses</p>
</div>
</div>
</div>
font-size
andletter-spacing
properties are being used in parent and child elements to remove excess space caused byinline-block
. For more ways of removing this space, check this Question
关于javascript - 根据内容改变父div的宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41357600/