彼此相鄰100％寬度的div

我在頁面上最多有4個div，它們必須水平地坐在一起。每個div將有100％的寬度。彼此相鄰100％寬度的div

所有的，但第一個，因此將出現在頁面，直到我的風格，否則（最終使用jQuery）。

我怎樣才能實現這個div的風格？

標記：

<div class="wrapper"> 
    <div class="panel"> 
    </div> 
    <div class="panel"> 
    </div> 
    <div class="panel"> 
    </div> 
    <div class="panel"> 
    </div> 
</div>

我已經試過

我已經試過所有浮動的div的左側和「包裝」的溢出設置爲隱藏。我試着將顯示設置爲所有div的內聯塊。我已經嘗試了所有div的絕對位置。我試圖組合不同的東西，希望它能夠工作，但必須有一個適當的方法來做到這一點。

來源

2013-10-30 JᴀʏMᴇᴇ

這可能有幫助：http://stackoverflow.com/questions/6597889/2 -divs-both-100-next-to-each-other？rq = 1 – chriz

繼承人爲你提琴http://jsfiddle.net/chriz123/3CpL8/3/ – chriz

如果一個div的寬度爲100％，那麼將不會有另一個div與此對齊的空間。

所以我會說對齊他們只使用20％的寬度。

25％也適用於4格，但不能使用任何邊框，邊距或填充。

也可以在px中設置最小寬度。

看看這個例子：http://jsfiddle.net/3CpL8/ 可能有助於

.wrapper > div { 
    width:20%; 
    background-color:orange; 
    height:60px; 
    float:left; 
    min-width:100px; 
    margin:5px; 
}

來源

2013-10-30 16:16:49 caramba

非常感謝你的建議，但我需要每個人div以寬度方式填充屏幕，或者至少使其看起來像是一樣。 –

@deemac然後25％和內部去100％http://jsfiddle.net/3CpL8/1/這樣做的工作？ – caramba

告訴我，如果有的像這是你想要我用display:inline-block

http://jsfiddle.net/fdXLb/

那麼我可以什麼做一個更好的解釋。

來源

2013-10-30 16:22:58 DaniP

一個很好的竅門是使用white-space: nowrap;來防止div移動到下一行。這是你的CSS會是什麼樣子：

.wrapper { 
    white-space: nowrap; 
    overflow-x: hidden; 
} 

.wrapper > div { 
    width:100%; 
    background-color:red; 
    height:60px; 
    display: inline-block; 
    min-width:100px; 
    margin:5px; 
}

看看這個Fiddle和使用瀏覽器的檢查它看到的div仍然存在，但戲外你想要的寬度。我假設你想繼續在父div上使用overflow-x: hidden;，所以在做javascript的時候不會有醜陋的滾動條:)

來源

2013-10-30 16:25:04 rogMaHall

彼此相鄰100％寬度的div

回答

相關問題