css - CSS 布局（1 个 div - 4 个从右侧浮动的 imgs）

Question

我正在处理第一个 div 应该包含文本的 css布局，div 的宽度和高度应该根据内容灵活。右边应该有 4 个（将来可能更多）具有相同尺寸的图像，最好能适应第一个 div，但它们必须是正方形。现在我只有这样的东西。有任何想法吗？谢谢！

Answer 1

使用浮点数怎么样？您将有两个容器div一个浮动。这些图像可以很容易地放在桌子上，因为它们都是相同的大小。如果您提前知道图像的宽度，您可以将第一个 div 预定义为该宽度和高度，这样如果布局变得太小，它就不会分解图像。

<div style="float:right;">
    <table>
        <tr>
            <td><img src="" /></td>
            <td><img src="" /></td>
        </tr>
        <tr>
            <td><img src="" /></td>
            <td><img src="" /></td>
        </tr>
    </table>
</div>
<div>
    <p>some text here</p>
</div>

Answer 2

您可以使用以下 HTML：

​<div id="wrapper">
    <div id="display">Some text</div>
    <div id="rightBar">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

连同以下 CSS：

#wrapper {
    overflow: auto;
    background-color: yellow;
    display: inline-block
}

#display {
    width: 100px;
    height: 100%;
    float: left;
    border: 1px solid black;
}

#rightBar {
    width: 100px;
    background-color:red;
    float: left;
}

#rightBar div {
    border: 1px solid black;
    width: 40px;
    height: 40px;
    display: inline-block;
}​

在此处查看实时示例