Question

我有一个div，有20个内联的小图像，如果用户改变屏幕宽度，我需要调整它们的大小，现在当右边没有更多的可用空间时，行的最后一个图像进入下一个而不是我希望每个图像都调整大小。我的结构如下：

＆＃13;

.finitures {margin: 0;border-bottom: 1px solid #9c9b9b;padding-bottom: 20px;}
.finitures:last-child{border-bottom: none;}
.finiture-img img{border: 1px solid #898886; margin-top:2px; cursor:pointer;}

＆＃13;

 <div class="box-detail">
    <h1>Colori</h1>
    <div class="finitures">
        <div class="finiture-img">
            <img src="http://placehold.it/68x50/990000/fff">
        </div>
        <div class="finiture-img">
            <img src="http://placehold.it/68x50/990000/fff">
        </div><div class="finiture-img">
            <img src="http://placehold.it/68x50/990000/fff">
        </div><div class="finiture-img">
            <img src="http://placehold.it/68x50/990000/fff">
        </div><div class="finiture-img">
            <img src="http://placehold.it/68x50/990000/fff">
        </div><div class="finiture-img">
            <img src="http://placehold.it/68x50/990000/fff">
        </div><div class="finiture-img">
            <img src="http://placehold.it/68x50/990000/fff">
        </div><div class="finiture-img">
            <img src="http://placehold.it/68x50/990000/fff">
        </div><div class="finiture-img">
            <img src="http://placehold.it/68x50/990000/fff">
        </div><div class="finiture-img">
            <img src="http://placehold.it/68x50/990000/fff">
        </div><div class="finiture-img">
            <img src="http://placehold.it/68x50/990000/fff">
        </div><div class="finiture-img">
            <img src="http://placehold.it/68x50/990000/fff">
        </div><div class="finiture-img">
            <img src="http://placehold.it/68x50/990000/fff">
        </div><div class="finiture-img">
            <img src="http://placehold.it/68x50/990000/fff">
        </div><div class="finiture-img">
            <img src="http://placehold.it/68x50/990000/fff">
        </div><div class="finiture-img">
            <img src="http://placehold.it/68x50/990000/fff">
        </div>
    </div>

＆＃13;

我该怎么办？

Answer 1

尝试在%

中提供图片的宽度

.finitures {margin: 0;border-bottom: 1px solid #9c9b9b;padding-bottom: 20px;}
.finitures:last-child{border-bottom: none;}
.finiture-img{display:inline;}
.finiture-img img{border: 1px solid #898886; margin-top:2px; cursor:pointer; width:25%;}

<div class="box-detail">
                        <h1>Colori</h1>
                        <div class="finitures">
                            <div class="finiture-img">
                                <img src="http://placehold.it/68x50/990000/fff">
                            </div>
                            <div class="finiture-img">
                                <img src="http://placehold.it/68x50/990000/fff">
                            </div><div class="finiture-img">
                                <img src="http://placehold.it/68x50/990000/fff">
                            </div><div class="finiture-img">
                                <img src="http://placehold.it/68x50/990000/fff">
                            </div><div class="finiture-img">
                                <img src="http://placehold.it/68x50/990000/fff">
                            </div><div class="finiture-img">
                                <img src="http://placehold.it/68x50/990000/fff">
                            </div><div class="finiture-img">
                                <img src="http://placehold.it/68x50/990000/fff">
                            </div><div class="finiture-img">
                                <img src="http://placehold.it/68x50/990000/fff">
                            </div><div class="finiture-img">
                                <img src="http://placehold.it/68x50/990000/fff">
                            </div><div class="finiture-img">
                                <img src="http://placehold.it/68x50/990000/fff">
                            </div><div class="finiture-img">
                                <img src="http://placehold.it/68x50/990000/fff">
                            </div><div class="finiture-img">
                                <img src="http://placehold.it/68x50/990000/fff">
                            </div><div class="finiture-img">
                                <img src="http://placehold.it/68x50/990000/fff">
                            </div><div class="finiture-img">
                                <img src="http://placehold.it/68x50/990000/fff">
                            </div><div class="finiture-img">
                                <img src="http://placehold.it/68x50/990000/fff">
                            </div><div class="finiture-img">
                                <img src="http://placehold.it/68x50/990000/fff">
                            </div>
                        </div>

Answer 2

您可以为图像容器设置百分比宽度（finiture-img），并为其中包含的图像设置100％宽度。例如，如果您有N = 4，则可以将finiture-img宽度设置为25％。

.finiture-img
{
    display:inline-block;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    vertical-align:top;
    margin-right:-4px;
    width:25%;
}

.finiture-img img
{
    border: 1px solid #898886; 
    margin-top:2px; 
    cursor:pointer;
    width:100%;
}

Fiddle

这允许您根据用户屏幕宽度缩放图像。

请注意box-sizing:border-box和margin-right:-4px，它们可以消除finiture-img div之间的空格，并使用精确的宽度缩放它们，即使它们有边框和填充（您可能会发现）有关box-sizing属性here）的更多信息。

如何在div中调整N个图像

2 个答案: