Question

设计一个网站，我遇到了一个特定的问题。

我希望彼此相邻的两列文字。所以我浮动（左）第一组文本，并设置50％的边距，以保持在一边。但是当我完成下一列文本并将其浮动时（我也试过了），但它出现在前一列文本中。我也试过使用position：relative并移动它，但它拒绝移动。

我猜这是因为元素不能放在另一个元素边缘内。

请帮助，没有Javascript。这很邪恶。

HTML

<h1 id="firstcolumn">blahblahblahblahblahblah</h1>
<h2 id="secondthingy">foobarfoobarfoobar</h2>

CSS

#firstcolumn {
    float: left;
    margin: 20;
    margin-left: 15px;
    margin-right: 50%;
    border-right-style: solid;
    border-right-color: black;
    border-right-width: 3px;
    font-size: 200%;
}
#secondthingy { 
    float: right;
}

Answer 1

使用<div class="wrapper"></div>并为其修改宽度。

然后将两个<div class="column"></div>放入float: left，并将这两列设置为包装器的50％。

然后将您的文本放入每个列中。

我相信这是你试图做的事情。如果没有，请详细说明。

Answer 2

绝对

#secondthingy { left:50%; position:absolute; }

Answer 3

以下内容应该为您提供两列左对齐文本：

#firstcolumn {
    float: left;
    margin: 20;
    max-width: 50%;
    margin-left: 15px;
    border-right-style: solid;
    border-right-color: black;
    border-right-width: 3px;
    font-size: 200%;
}

#secondthingy { 
float: right;
    text-align:left;
    width:45%;
}

Answer 4

您可以删除#firstcolumn上的2个额外边距值以获得所需的结果：

#firstcolumn {
  float: left;
  margin-left: 15px;
  border-right-style: solid;
  border-right-color: black;
  border-right-width: 3px;
  font-size: 200%;
}

#secondthingy { 
  float: right;
}

我认为边际占用太多空间并导致h2被推下线。

您是否可以将文本放在另一个元素边距内？

4 个答案: