漂浮在CSS中 - 向右漂移時留在頂部的空白/空格？

這有點難以描述，但基本上我的頁面上浮動div留下了不必要的空間。這裏是描述問題的圖片。黑盒子是divs。漂浮在CSS中 - 向右漂移時留在頂部的空白/空格？

浮動之前：

alt text

浮動後：

alt text

預期的效果：

alt text

而且我不蘇如果它有所不同，但我也有一個空的div，並且在浮動div之後立即放置「clear：both」。

我怎樣才能做到這一點？

來源

2010-01-12 ground5hark

我們可以看到CSS和HTML導致此問題？ – 2010-01-12 17:33:06

我試圖浮動兩個div，但這並沒有立即解決我的問題。問題在於有一個流氓div（未裝飾）在兩者之間懸掛，仍造成與上述相同的效果。在將這個div移動到最左邊的div後，我能夠達到適當的效果。下面標出的答案是幫助我弄清楚的答案。感謝大家的回答。 – ground5hark 2010-01-12 18:09:12

<div class="a1">a1</div> 
<div class="a2">a2</div> 

.a1 
{ 
background-color:Red; 
    width:200px; 
    height:200px; 
float:left; 
} 
.a2 
{ 
    background-color:Green; 
    width:200px; 
    height:200px; 
    float:left; 
}

=======試試這個

來源

2010-01-12 17:44:35

EEEH !! wriong！ – bobobobo 2010-05-15 22:02:10

刪除清除分區。還要檢查這些div上的填充/邊距，並確保包含div（父div）足夠寬以容納兩個子div。

來源

2010-01-12 17:33:16 a432511

第一個div應該有float: left設置。否則，第一個div是塊元素，它將佔據所有的垂直空間。

來源

2010-01-12 17:34:00

問題是你只浮動一個div。您需要在非浮動div上使用margin-right與浮動div的總空間（width + paddding + margin）相同的寬度。

或者可以浮動兩個div。

例子：

<div id="container" style="width: 410px;"> 
<div style="float: right; width: 200px;"> 
    <p> Right div</p> 
</div> 
<div style="width: 200px; margin-right: 210px;"> 
    <p> Left Div</p> 
</div> 
<div style="clear:both;"></div> 
</div>

OR：

<div id="container" style="width: 410px;"> 

<div style="float: left; width: 200px; margin-right: 10px;"> 
    <p> Left Div</p> 
</div> 
<div style="float: left; width: 200px;"> 
    <p> Right div</p> 
</div> 
<div style="clear:both;"></div> 
</div>

來源

2010-01-12 17:34:32 prodigitalson

如果可能的話，把float: rightdiv HTML中unfloated div之前。

來源

2010-01-12 17:37:24

是的，這是正確的答案。 – bobobobo 2010-05-15 22:07:16

雙方的div應浮動離開，並確保它們等於或低於它們在容器的寬度。

來源

2010-01-12 22:30:29 wilwaldon

如果A1看起來漂浮在a2的右邊，那麼你必須在HTML中放一個FIRST，然後把它浮起來。有點直觀，但它的浮動工作。

<div class="container"> 
    <div class="a1">a1</div> 
    <div class="a2">a2</div> 
</div> 
<style> 
div 
{ 
    border: solid 2px #000; 
    background-color: #eee; 
} 
.a1 
{ 
background-color:Red; 
    width:200px; 
    height:200px; 
float:right; /* the trick is, a1 appears BEFORE a2 in the html, yet 
we are floating a1 right . if you do it the other way around 
(try and float a2) then it will work like you showed 
(separate line)*/ 
} 
.a2 
{ 
    background-color:Green; 
    width:200px; 
    height:200px; 
    /* don't float this one */ 

} 
</style>

來源

2010-05-15 22:05:42 bobobobo

HTML 
<div id="container"> 
    <div id="main"> 
    blah blah blah blah blah 
    </div> 
    <div id="aside"> 
    this goes to the side 
    </div> 
    <div id="clear"></div> 
</div> 

CSS 
div#container 
{ 
    width : 80%;//your preference 
    height : auto; 
    margin : 0 auto;//Centers the page 
} 

div#main 
{ 
    width : 70%; 
    height : auto; 
    display : block;//to wrap it up inside its width 
    float : left;//float it towards left 
} 

div#aside 
{ 
    width : 30%;//take up rest of the width size 
    height : auto; 
    display : block; 
    float :right;//float towards right 
} 

#clear 
{ 
    clear : both;//this will do the job 
}

來源

2012-11-29 11:14:18 Nik

有一個白色的空間的問題與浮動。這就是爲什麼第二個盒子稍微低一點的原因。

<div style="float:left">a1</div><div style="float:left">a2</div>

將工作。

<div style="float:left">a1</div> 
<div style="float:left">a2</div>

將無法正常工作

來源

2013-05-23 23:50:29 Sean

漂浮在CSS中 - 向右漂移時留在頂部的空白/空格？

回答

相關問題