Question

我曾经在几年前创建网站，一切都是用表格制作的，但现在看来，div和span（如果你知道如何使用它）一切都变得容易了。

现在我正在尝试创建一个简单的2列布局，第一个是20％的宽度（左对齐），另一个是80％的宽度。这可能很简单，但第二列必须在文档的中间水平显示文本，而不是在div的中间。

这就是我现在所拥有的，但它没有将文本置于文档的50％中心，关闭div之后，当我已经使用

时，它下面的文本就像在第二列中一样

<div class="centered">
  <div style="float: left; width: 20%;"></div>
  <div style="float: left; width: 80%;">This text should be in the middle</div>
</div>

我希望你能帮助我。

Answer 1

您不需要使第二个div浮动。此外，第一个div应该有一些内容，或者 height 0 。

<body>
    <div class="centered">
    <div class="red" style="float: left; width: 20%;">&nbsp;</div>
    <div class="blue" style="">This text should be in the middle</div>
  </div>
</body>

看看这个Fiddle

Answer 2

我也发布了我的回答，因为我不理解你的请求，就像其他回复者一样：

这是一个有用的 demo

我将左侧div放置在相对于其父级的位置，并在rigth中添加一些填充以正确包装文本

div.R{
    background-color : gray;
    position : absolute;
    top : 0px;
    bottom : 0px;
    left : 0px;
    width: 20%;
}
div.L{
    text-align : center;
    padding-left: 20%;
    padding-right: 20%;
}

如果我理解正确，将文字显示在整个文件的50％意味着你将失去文件右侧20％的空间......

编辑：我不知道为什么我在主要div上设置固定高度：Fixed

Answer 3

感谢您的回答。

实际上它比我想象的要简单。我只需要添加其中一个：

<div class="centered">
  <div style="float: left; width: 20%;">aa</div>
  <div style="float: middle; width: 80%; text-align : center">This text should be in the middle</div>
</div>

OR

 <div class="centered">
      <div style="float: left; width: 20%;">aa</div>
      <div style="float: left; width: 80%; text-align : center; margin-right: 20%;">This text should be in the middle</div>
    </div>

在div中创建2列

3 个答案: