CSS浮動div與他們之間的餘量（例如img在描述中）

這可能是一個經典問題，但我似乎無法找出解決方案。我有一些需要包裝在容器中的div。這很簡單，加入float: left和固定寬度。CSS浮動div與他們之間的餘量（例如img在描述中）

但是，如何在沒有右邊卡的餘量的情況下在他們之間獲得保證金。這些div是動態生成的，所以我不能在第二個div上使用不同的類來定位它。

任何想法？

float trickiness

來源

2011-05-21 Ian McIntyre Silber

我討厭這樣說，但看起來真的就像它可能是

:) – David2011-05-21 20:05:20

回答

特技我有時使用是有添加一個額外的更寬div來允許所述浮體和然後隱藏在頂層的div任何重疊。沒有一個例子很難解釋 - so here is one

.inner div包含浮點數，因爲它的寬度是10px，而.outer div會裁剪那些10px。

HTH :)

來源

2011-05-21 20:05:30 lnrbob

，如果我想在CSS中嚴格做到這一點沒有腳本或後端的介入，我可能會使用nth-child屬性：

CSS

.card { width: 60px; height: 100px; background-color: #ededed; border: 1px solid #999; } 
.card:nth-child(even) { float: left; } 
.card:nth-child(odd) { float: right; } 
#container { width: 130px; } 
#header { width: 100%; color: #fff; background-color: #000; margin-bottom: 3px; }

HTML

<div id="container"> 
    <div id="header">header</div> 
    <div class="card">0</div> 
    <div class="card">1</div> 
    <div class="card">2</div> 
    <div class="card">3</div> 
    <div class="card">4</div> 
</div>

http://jsfiddle.net/bpMCB/

當然，你必須玩弄尺寸以適應你想要做的事情。

來源

2011-05-21 20:10:29

可能會想嘗試：

http://snook.ca/archives/html_and_css/getting_your_di

我想出了另一種方式，你需要有一個包含分區空間：

<style> 
    #container { 
     background: white; 
     width: 510px; 
     height: 610px; 
     position: absolute; 
    } 
    #container2 
    { 
     width: 520px; 
     position: absolute; 
    } 
    .card { 
     background: grey; 
     margin: 5px; 
     float: left; 
     width: 250px; 
     height: 300px; 
    } 
</style> 

<div id="container"> 
</div> 
<div id="container2"> 
    <div class="card"></div> 
    <div class="card"></div> 
    <div class="card"></div> 
    <div class="card"></div> 
</div>

來源

2011-05-21 20:34:20 David

我猜你可能不想走這條路線，因爲它實際上使它成爲一張桌子..： - \ \雖然有一些有趣的討論。 – David 2011-05-21 20:35:49

相關問題