邊距不工作時明確：既使用

你可以從我使用clear:both，讓我把#one #two下#three代碼中看到的，但這似乎是從增加margin-top到#three阻止我有一個修復這個？邊距不工作時明確：既使用

<div id="one"> 
</div> 
<div id="two"> 
</div> 
<div id="three" class="clearfix"> 
</div> 

#one { 
    float:left; 
} 

#two { 
    float:right; 
} 

.clearfix { 
    clear:both; 
} 

#three { 
    margin-top: 20px; 
}

來源

2012-09-27 Giles

我與我的最快，最好的答案去了。不過你們都是對的。再次感謝你們。 – Giles

裹#one和#two在容器overflow:hidden;的選項，你甚至不會需要clearfix。

Demo

<div id="container"> 
<div id="one"></div> 
<div id="two"></div> 
</div> 
<div id="three"></div> 

#container { 
    overflow:hidden; 
} 
#one { 
    float:left; 
} 
#two { 
    float:right; 
} 
#three { 
    margin-top: 20px; 
}

來源

2012-09-27 10:38:16 Giona

-1

您需要將clear: both;應用於#three div。

那麼這將是這樣的：http://jsfiddle.net/uJBK2/

編輯現在我明白你只是缺少clearfix之前的點。沒關係。

來源

2012-09-27 10:36:31

你的jsfiddle不回答這個問題。 –

你說得對，我的不好。 –

應用float:left;到#three解決您的問題

編輯：或者跟隨法布里奇奧和添加填充，如果你不想浮什麼，但是沒有必要使用相對定位。

來源

2012-09-27 10:37:33 ASouthorn

作爲一種變通方法，你可以使用

padding-top : 20px

，或者您也可以在技術上使用應用上#three格

position: relative; 
top: 20px;

。或甚至

padding-bottom: 20px;

適用於#two div。甚至

#two:after { 
    content : ""; 
    clear : both; 
    display : block; 
    height : 20px; // or margin-bottom: 20px; 
}

只要選擇適合最適合您的佈局

來源

2012-09-27 10:37:34 fcalderan

如果這些div中的任何一個具有背景顏色/圖像，則可能會添加'padding'，但是'position：relative;'確實要這樣做;-) – Giona

嗨現在改變你一些HTML代碼，做這個

<div style='overflow:hidden'> 
    <div id="one">Left</div> 
    <div id="two">Right</div> 
</div> 
<div id="three" class="clearfix">// your data </div>

Live Demo

來源

2012-09-27 10:39:25

這JSFiddle應該幫助

<div class="row"> 
    <div id="one"> 
     a 
    </div> 
    <div id="two"> 
     b 
    </div> 
</div> 

<div id="three"> 
    c 
</div>

你CSS

#one { 
    float:left; 
}  
#two { 
    float:right; 
}  
clearfix { 
    clear:both; 
} 
.row{ overflow: hidden; border: 1px solid red; } 
#three { 
    margin-top: 40px; border: 1px solid green; 
}

來源

2012-09-27 10:41:42 Dipak

邊距不工作時明確：既使用

回答

相關問題