Question

我有一些任意数量的大小相同的元素，这些元素向左浮动并由一些右/下边距分隔，以便在网格中显示它们。保存浮动元素的容器大小将根据浏览器窗口大小而变化。

我希望将容器设置为100％的宽度，并尽可能多地将元素放在一行中。

我遇到的问题是每行中最右边元素的右边距必须包含在包含元素内，这意味着我并不总是得到尽可能多的浮动元素

我不能只为父级添加宽度，因为我想使用宽度100％，并且从网格中的每个第n个元素中删除边距不起作用，因为行中的元素数量会因宽度而异父母的。

我想我可以使用jQuery来获取容器的宽度，计算适合的元素数量，然后适当地删除边距，但我希望有更简单的方法来解决这个问题。

例如，下面的代码显示每行2个框，但我希望它有3个（不仅仅增加.wrap的宽度）。

<!doctype html>
<html>
<head>
<style type="text/css">
    body{
        margin:0;
    }
    .wrap {
        width: 400px;
        margin: 0 auto;
    }
    main {
        width: 100%;
    }
    .box{
        width: 100px;
        height: 100px;
        margin: 0 50px 50px 0;
        float: left;
        background-color: #999
    }
</style>
</head>
<body>
<div class='wrap'>
    <main>
        <div class="box">
            <p>Some content...</p>
        </div>
        <div class="box">
            <p>Some content...</p>
        </div>
        <div class="box">
            <p>Some content...</p>
        </div>
        <div class="box">
            <p>Some content...</p>
        </div>
        <div class="box">
            <p>Some content...</p>
        </div>
        <div class="box">
            <p>Some content...</p>
        </div>
    </main>
</div>

Answer 1

这可以通过使用box-sizing黑客来实现。编辑你的CSS，它包括：

.wrap {
  position: relative;
  padding: 0 25px;
}
.main {
  position: absolute;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

这里发生了什么？

首先，我们将所需的大小作为填充添加到包装器中。因为填充超出了宽度范围，所以它被添加到“框”之外并且不会影响内容宽度。接下来，我们将.main相对于.wrap的相对位置置于绝对位置。这样，绝对定位元素不会被其相对父元素直接限制。

现在，如果我们将box-sizing设置为border-box，我们命令CSS将填充和边框包含在其宽度中。因此，其父级的100％宽度（400px）和 50px的填充使得450px，这是三个100px和50px边距所需的大小。

你的最终CSS将是

body{
    margin:0;
}
.wrap {
    width: 400px;
    margin: 0 auto;
    padding: 0 25px;
    position: relative;
}
main {
    width: 100%;
    position: absolute;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
.box{
    width: 100px;
    height: 100px;
    margin: 0 50px 50px 0;
    float: left;
    background-color: #999
}

防止边距导致浮动元素换行

1 个答案: