Question

根据我的理解，宽度为“ 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>

Answer 1

您给左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>

Answer 2

实际上，您使用的位置是：绝对；左：50％；因此，剩下的50％包含一半的空间...为其制作适当的CSS。.我认为您不需要使用position：absolute;使用display：锁定并对齐中心

Answer 3

            .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>

Answer 4

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

width：320像素按原样设置宽度。您可以将其更改为最小宽度，以便仍可以扩展。

问题：div与width：auto仅自动扩展到特定点

4 个答案: