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