CSS Float 问题 - Div 显示在不正确的位置

Question

我有 3 个 div。第一个 div 是矩形边框。我尝试了不同的 float 组合以使 2 个 div 显示在第一个 div 旁边，但没有成功。这是下面的代码和 jsfiddle。

<div class="attempt">

</div>
<div>
<ul id="menu">
  <li><a style="background:#3F4E64"  href="/html/default.asp">Button1</a></li>
  <li><a style="background:#788291">Button2</a></li>
</ul>  
</div>

<div>
<H2>TITLE</H2>
<p>
BADKADA
</p>
<p>
Fusce luctus ipsum in dui accumsan, posuere scelerisque lacus ultrices. Quisque quis ultricies nunc. Nam augue magna, eleifend id mi vel, pretium
</p>
<p>
Fusce luctus ipsum in dui accumsan, posuere scelerisque lacus ultrices. Quisque quis ultricies nunc. Nam augue magna, eleifend id mi vel, pretium
</p>

CSS

.attempt  {
  width:15px;
  height:1290px;
  background: #3F4E64
}

https://jsfiddle.net/ksaluja/f1s51sj4/

Answer 1

去掉 display 属性，第一个 div 默认为 block。然后将其 float 到左侧并为其留出 20px 左右的 margin-right 以给内容一些喘息的空间。

.attempt {
    float:left;
	width: 15px;
    height: 1290px;
    background: #3F4E64;
	margin-right:20px;
}

<div class="attempt">

</div>
<div>
    <ul id="menu">
        <li><a style="background:#3F4E64" href="/html/default.asp">Button1</a></li>
        <li><a style="background:#788291">Button2</a></li>
    </ul>
</div>

<div>
    <H2>TITLE</H2>
    <p>
        BADKADA
    </p>
    <p>
        Fusce luctus ipsum in dui accumsan, posuere scelerisque lacus ultrices. Quisque quis ultricies nunc. Nam augue magna, eleifend id mi vel, pretium
    </p>
    <p>
        Fusce luctus ipsum in dui accumsan, posuere scelerisque lacus ultrices. Quisque quis ultricies nunc. Nam augue magna, eleifend id mi vel, pretium
    </p>

    <p>
        Fusce luctus Fusce luctus ipsum in dui accumsan, posuere scelerisque lacus ultrices. Quisque quis ultricies nunc. Nam augue magna, eleifend id mi vel, pretium fring.
    </p>
</div>