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

Question

我有 3 个 div。第一个div是矩形边框。我尝试了不同的浮动组合来让 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

去掉显示属性所以第一个div默认为block。然后将它浮动到左边并给它一个 margin-right 20px 左右给内容一些喘息的空间。

.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>

Answer 2

将尝试 div 的显示属性设置为 'inline-block' 会将 div 显示为内联块容器，因此任何内容或 div 的前面将显示在它之后而不是旁边。因此，要将下一个 div 设置到第一个设置的一侧，您可以按照@symlink 的说明进行操作。 'block'或显示默认属性，会将div设置为一个独立的块，其他div元素将对齐到该块的一侧。

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

CSS Float Issue - Divs displaying in improper location

css

css-float