html - 在中间设置 3 个 div 容器

我现在创建了 3 个 Div 容器。每个容器的宽度为 300px + 2*4px 每个边框(右和左)。 div 容器位于一个部分中，该部分的宽度为 1200px。结果现在每个容器之间有 92px 的空间。 (1200px - (308px*3))/3 = 92px。但是，如果我将 margin-left 设置为 92px，则空间不正确并且容器不在该部分的中间。这是 myPage和代码:

*{
    margin: 0px;
    padding: 0px;
}

section{
    width: 1200px;
    margin-left: auto;
    margin-right: auto;
    background-color: #00ff00;
    overflow: hidden;
}


.divbox{
    height: 300px;
    width: 250px;
    border: 4px dashed black;
    border-radius: 10px;
    float: left;
    margin-left: 92px;
}

.divbox:after{
    float: none;
}

<html>
    <head>
        <title>Startseite</title>
        <link rel="stylesheet" href="index.css">
        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    </head>
    <body>
        <section>
            <article>
                <div class="divbox">
                    content
                </div>
                <div class="divbox">
                    content
                </div>
                <div class="divbox">
                    content
                </div>
            </article>
        </section>
    </body>
</html>

最佳答案

你的数学有问题。例如，您的宽度是 250px 而不是 300px。当有 4 个空间需要平均处理时，您将除以 3。所有空格之间的差异为 106.5(向下舍入):

enter image description here

.divbox{
    height: 300px;
    width: 250px;
    border: 4px dashed black;
    border-radius: 10px;
    float: left;
    margin-left: 106px;
}

EXAMPLE 1

但不是使用 float 和边距来使它们居中，而是使用 display: inline-block 然后设置 text-align: center 在父 部分 上:

section{
    width: 1200px;
    margin-left: auto;
    margin-right: auto;
    background-color: #00ff00;
    overflow: hidden;
    text-align: center; //add
}


.divbox{
    display: inline-block; //add instead of float
    height: 300px;
    width: 250px;
    border: 4px dashed black;
    border-radius: 10px;
    margin: 0 50px;
}

EXAMPLE 2

关于html - 在中间设置 3 个 div 容器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27990805/

html - 在中间设置 3 个 div 容器

上一篇：javascript - 带有自定义图像的单选按钮

下一篇：html - 如何在 Bootstrap 中在网格中制作垂直线？