Question

我现在创建了3个Div容器。每个边框（右侧和左侧）的每个容器的宽度为300px + 2 * 4px。 div容器在一个部分中，截面的宽度为1200px。结果是每个容器之间的空间为92px。（1200px - （308px * 3））/ 3 = 92px。但是如果我设置了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>

Answer 1

你的数学已关闭。对于你的宽度是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

但是，不是使用浮点数和边距来居中这些更好的选项，以始终确保它们居中是使用display: inline-block，然后在父text-align: center上设置section：

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

Answer 2

这样的事情？ http://jsfiddle.net/swm53ran/124/

此代码具有响应性（即使您更改屏幕宽度，也会始终保持在屏幕中间）

<div class="layout">
    <div class="centre">
        <div class="divbox">
            content
        </div>
        <div class="divbox">
            content
        </div>
        <div class="divbox">
            content
        </div>
    </div>
</div>

div.layout
{
  text-align: center;
}
div.centre
{
  text-align: center;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

编辑：增加中间空格的边距

margin-left:20px;
margin-right:20px;

在中间设置3个div容器

2 个答案: