Question

我见过this thread，它解答了如何将两列放在一起，因为您知道两列的总宽度（以像素为单位）。如果我不知道或不想硬编码怎么办？如果我想在任何时候想要改变列的宽度，我还需要手动重新计算包装的内容。它违反了the DRY principle并降低了可维护性。

所以这是示例代码。如何修改它以使两列以任意大小的屏幕为中心而不指定总容器宽度（以像素为单位）？（此代码根本不居中）

<html>
    <style>
        .column {
            width: 100px;
            float: left;
            border: 1px green solid;
            margin: 10px;
        }
        .container: {
            margin:auto;
        }
    </style>
</html>
<body>
    <div class="container">
        <div class="column">qwerty</div>
        <div class="column">asdf</div>
    </div>
</body>

Answer 1

display:inline-block您的列，然后您可以在容器上设置text-align:center;

.column {
  width: 100px;
  border: 1px green solid;
  margin: 10px;
  display: inline-block;
  text-align: left;
}
.container {
  margin:auto;
  text-align: center;
}

小提琴：http://jsfiddle.net/dPZ7L/2/

Answer 2

我不同意这个问题的前提，大多数时候你需要知道你正在做什么的宽度，因为你需要处理响应 - 否则你的包装总是100％。在包装器上设置一次宽度然后在其他地方使用百分比更加可维护。这意味着您可以将包装器置于中心位置，然后不必担心计算出列的宽度，例如。

.wrapper{
 width: 300px;
 margin: 0 auto;
}

.col1{
width: 50%;
float: left;
}

.col2{
width: 33.33%
float: left;
}

这只是一个例子。我最喜欢的网格系统使用了这个想法：https://github.com/stubbornella/oocss/wiki/grids

如何在不使用固定宽度容器的情况下使用CSS将两列对中？

2 个答案: