CSS浮动问题 - Divs显示位置不正确

问题描述：

我有3个div。第一个div是矩形边框。我尝试了不同的浮动组合，以获得第一个div旁边显示的2个div，但未成功。这里是下面的代码和jsfiddle。CSS浮动问题 - Divs显示位置不正确

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

http://stackoverflow.com/a/32122011/3597276 –

我看不到在这里浮动，也许你可以看看flex :) https://jsfiddle.net/f1s51sj4/1/ –

答

取出的显示属性，以便第一个div默认为block。然后将它浮动到左边，并给它一个20px左右的余量以给内容一些喘息的空间。

.attempt { 
 
    float:left; 
 
\t width: 15px; 
 
    height: 1290px; 
 
    background: #3F4E64; 
 
\t 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>

答

设置显示属性的尝试div来“inline-block的”将显示DIV为inline-block的容器，所以任何内容或DIV的未来将在之后显示它并不是旁边。因此，为了让下一个部门接近第一个部门，你可以这样解释@symlink。 'block'或display的默认属性，会将div设置为一个独立的块，其他部分将与此块对齐。

CSS浮动问题 - Divs显示位置不正确

相关推荐