Question

我目前为我的4列提供了以下CSS，将来可能会增长到5或6：

<style>
.columns {
    margin: 0 auto;
    border: 1px red dotted;
    width: 90%;
}

.columns div {
    float: left;
    width: 20%;
    overflow:hidden;
    border: solid 1px;
    margin-right: 1em;
}
</style>

<div class="columns">
  <div>
    <h3>First</h3>
    <ul>
      <li>left</li>
    </ul>
  </div>
  <div>
    <h3>Second</h3>
    <ul>
      <li>mid</li>
    </ul>
  </div>
  <div>
    <h3>Third</h3>
    <ul>
      <li>right</li>
    </ul>
  </div>
  <div>
    <h3>Fourth</h3>
    <ul>
      <li>far right</li>
    </ul>
  </div>
</div>

是否可以使用我所拥有的内容在页面中间的所有4列中心？

Answer 1

您将不得不在.columns上设置静态宽度：

.columns {
    width: 800px;
    margin-left: auto;
    margin-right: auto;
    border: 1px red dotted;
}

您可能希望在文档的底部（.columns之后）放置一个清除div：

<div style="clear: both;">&nbsp;</div>

只是伸出.columns容器（所以你的边框是列的长度）。

<强>更新

如果您正在尝试严格制作四列布局，请更新.columns div：

.columns div {
    width: 160px;
    padding-left: 10px;
    padding-right: 10px;
    margin-left: 10px;
    margin-right: 10px;
}

这里唯一真正的秘密是取容器的总宽度除以4。在我提供的情况下，800/4 = 200因此每列的总宽度（宽度+填充+边距）为200px;

Answer 2

嗯，技术上是的，但是它要求你在某个时候设置一个宽度，可能在你的包装div上。我不知道是否有可能以动态宽度（即20％宽度）浮动列为中心。如果您将包装器div宽度设置为某个值，则可以在其他列上设置边距以使它们居中

Answer 3

我认为在用最少的硬编码计算值读取所有可能的答案后，我得到了一些可行的东西。为简单起见，我已经取出了边界：

.columns {
    position: relative;
    clear: both;
    margin: 0 auto;
    width: 900px;
}

.columns div {
    position: relative;
    float: left;
    width: 22%;
    overflow:hidden;
    margin-right: 4%;
}

.columns div.last {
    margin-right: 0;
}

在最后一栏中使用<div class="last">。

如何使用CSS将n列居中？

3 个答案: