Question

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

\1\2

CSS

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

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

Answer 1

取出display属性，使第一个div默认为block。然后将它漂浮到左侧并给它一个20px左右的边距，使内容有一些喘息空间。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

将尝试div的显示属性设置为＆＃39; inline-block＆＃39;将div显示为内联块容器，因此前面的任何内容或div将显示在它之后而不是在旁边。所以，为了让下一个分区到第一个分区，你可以像@symlink一样解释。＆＃39;块＆＃39;或者显示的默认属性，将div设置为一个独立的块，其他分区将在此块的一侧对齐。

CSS Float Issue - Divs显示在不正确的位置

2 个答案: