1

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

http://jsbin.com/ewonas/1/

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>

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

谢谢

4

1 回答 1

1

.constrainer您将两个div的宽度设置为20%. 这意味着宽度是 parent 的 20% .inlineblock。所以当你有两个时，加起来就是父级的 40%。这意味着您还有 60% 的剩余空间，或者还有 3 个.constrainerdiv 的空间。

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

现场示例：http: //jsbin.com/ewonas/6

于 2013-02-07T23:54:34.597 回答