Question

适当的代码是什么？

div风格代码中的

。我知道如何使用float但只有2个divides。但在4个分歧中，我不知道。

Answer 1

只需float他们left，如有必要，添加right margin -1px，以便边框重叠得很好。这是一个SSCCE，只是复制'n'paste'n'run它：

<!doctype html>
<html lang="en">
    <head>
        <title>SO question 2684578</title>
        <style>
            .box {
                float: left;
                width: 100px;
                height: 100px;
                margin-right: -1px;
                border: 1px solid black;
            }
        </style>
    </head>
    <body>
        <div class="box">box1</div>
        <div class="box">box2</div>
        <div class="box">box3</div>
        <div class="box">box4</div>
    </body>
</html>

Answer 2

浮动仍然适用于任意数量的div，它们将彼此相邻排列，直到它们填充容器的宽度，此时它们将开始换行到下一行。

Answer 3

只需为每个div添加float: left。

Answer 4

此外，如果您不希望在调整窗口大小时将4个div包裹到下一行，您可以将4个div放在父div中并设置父div的宽度。

以下是基于BalusC上述代码的示例：

<!doctype html>
<html lang="en">
    <head>
        <title>SO question 2684578</title>
        <style>
            .box {
                float: left;
                width: 100px;
                height: 100px;
                margin-right: -1px;
                border: 1px solid black;
            }
            .parent {
                width: 404px;
                height: 100px;
            }
        </style>
    </head>
    <body>
        <div class="parent">
            <div class="box">box1</div>
            <div class="box">box2</div>
            <div class="box">box3</div>
            <div class="box">box4</div>
        </div>
    </body>
</html>

CSS div风格问题

4 个答案: