我有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/

最佳答案

取出display属性,以便第一个div默认为block。然后将其浮动到左侧,并向其右边距设置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>

关于css - CSS float 问题-Divs显示在不正确的位置,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/35676482/

10-12 12:20
查看更多