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/

來源

2016-02-27 Kelly Roper

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>

來源

2016-02-27 23:03:59 symlink

設置顯示屬性的嘗試div來「inline-block的」將顯示DIV爲inline-block的容器，所以任何內容或DIV的未來將在之後顯示它並不是旁邊。因此，爲了讓下一個部門接近第一個部門，你可以這樣解釋@symlink。 'block'或display的默認屬性，會將div設置爲一個獨立的塊，其他部分將與此塊對齊。

來源

2016-02-27 23:32:58

CSS浮動問題 - Divs顯示位置不正確

回答

相關問題