Question

我试图将一组包含动态缩放图像的浮动块居中。但是我遇到的问题是我用来输入浮动块的内联块没有缩小到图像的新大小。相反，它将包裹到图像的原始大小，留下一个很大的空白空间。

body {
    text-align: center;
}

.inlineblock {
    background: red;
    display: inline-block;
}

.constrainer {
    width: 20%;
    float: left;
}

.constrainer img {
    width: 100%;
}

<body>
    <div class="inlineblock">
        <div class="constrainer">
            <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Smiley.svg/500px-Smiley.svg.png">
            <h1>Product title</h1>
        </div>
        <div class="constrainer">
            <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Smiley.svg/500px-Smiley.svg.png">
            <h1>Product title</h1>
        </div>
    </div>
</body>

有人可以帮我解决这个问题吗？

由于

Answer 1

您要将两个.constrainer div的宽度设置为20%。这意味着宽度是父.inlineblock的20％。因此，当你必须将其中两个添加到父母的40％时。这意味着您剩余60％，或另外3个.constrainer div的空间。

要使.inlineblock元素缩小，您需要将.constrainer div的宽度设置为独立于其父级的数字，例如固定宽度，如300px，而不是百分比。

实例：http://jsbin.com/ewonas/6

内联块对象无法使用动态大小的图像正确调整大小

1 个答案: