问题:div带宽度:auto-only自动扩展到某个点

根据我的描述，宽度为"auto"的div将自动展开，直到填充父元素。在这个例子中，我有一行多个图标。

当图标的数量为7个或更多时，它将不再显示在同一行上。还有更多的空间，如果我指定一个足够大的宽度来包含项目，它就会显示在一行上。

为什么它只有在有足够空间的情况下才能自动膨胀到某个点？

注意：应该自动展开的是"img_strip"，而不是"容器"。

.container {
width: 320px;
border: 1px solid black;
}

img {
height: 20px;
}

.strip_container {
position: relative;
height: 25px;
}

.img_strip {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
margin: 1px;
/*
* It's displayed on one line if I specify
* an exact width 
*
* width: 200px;
*/

}

<div class="container">
<div class="strip_container">
<div class="img_strip">
<a href="#"><img src="src/main/resources/static/images/com_phone.png"/></a>
<a href="#"><img src="src/main/resources/static/images/com_email.png"/></a>
<a href="#"><img src="src/main/resources/static/images/com_url.png"/></a>
<a href="#"><img src="src/main/resources/static/images/com_address1.png"/></a>
<a href="#"><img src="src/main/resources/static/images/com_facebook.png"/></a>
<a href="#"><img src="src/main/resources/static/images/com_facebook.png"/></a>
<a href="#"><img src="src/main/resources/static/images/com_facebook.png"/></a>
</div>
</div>
</div>

你给左50%，从-50%开始，它占据了你宽度的50%，所以给text-align:center和left:0px;right:0px;，它将占据div 的整个宽度

.container {
width: 320px;
border: 1px solid black;
}

img {
height: 20px;
}

.strip_container {
position: relative;
height: 25px;
}

.img_strip {
right: 0;
position: absolute;
left: 0;
top: 50%;
transform: translate(0%, -50%);
margin: 1px;
text-align: center;
/*
* It's displayed on one line if I specify
* an exact width 
*
* width: 200px;
*/

}

img{
width:15px;}

<div class="container">
<div class="strip_container">
<div class="img_strip">
<a href="#"><img src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"/></a>
<a href="#"><img src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"/></a>
<a href="#"><img src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"/></a>
<a href="#"><img src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"/></a>
<a href="#"><img src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"/></a>
<a href="#"><img src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"/></a>
<a href="#"><img src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"/></a>
<a href="#"><img src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"/></a>
<a href="#"><img src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"/></a>
<a href="#"><img src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"/></a>
<a href="#"><img src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"/></a>
<a href="#"><img src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"/></a>
<a href="#"><img src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"/></a>
<a href="#"><img src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"/></a>
<a href="#"><img src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"/></a>
</div>
</div>
</div>

实际上您使用的位置：绝对；左：50%；所以剩下的50%包含一半的空间。。。为它制作合适的CSS。我认为你不需要使用position:absolute；使用显示器：阻止并对准中心

.common_container {
width: auto;
border: 1px solid black;
}

img {
height: 20px;
}

.strip_container {
position: relative;
height: 25px;
}

.img_strip {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
margin: 1px;
/*
* It's displayed on one line if I specify
* an exact width 
*
* width: 200px;
*/

}

<div class="common_container">
<div class="strip_container">
<div class="img_strip">
<a href="#"><img src="https://img.icons8.com/metro/1600/phone.png"/></a>
<a href="#"><img src="https://img.icons8.com/metro/1600/phone.png"/></a>
<a href="#"><img src="https://img.icons8.com/metro/1600/phone.png"/></a>
<a href="#"><img src="https://img.icons8.com/metro/1600/phone.png"/></a>
<a href="#"><img src="https://img.icons8.com/metro/1600/phone.png"/></a>
<a href="#"><img src="https://img.icons8.com/metro/1600/phone.png"/></a>
<a href="#"><img src="https://img.icons8.com/metro/1600/phone.png"/></a>
</div>
</div>
</div>

.container {
width: 320px;
border: 1px solid black;
}

width:320px按原样设置宽度。您可以将其更改为最小宽度，这样它仍然可以扩展。

相关内容

最新更新

热门标签：