DIV等高，流體寬度和各種色譜柱

我正在使用產品顯示頁面。我希望我的div可以像這個URL中的第二個示例那樣操作：http://css-tricks.com/examples/FluidEqualHeightFauxColumns/DIV等高，流體寬度和各種色譜柱

但是同一行中div的數量可能每次都不相同。如果有太多的div，這些將繼續在下一行。

有沒有可能這樣做沒有JavaScript？

在此先感謝！

HTML：

<div class="outer"> 
    <div class="inner">aaaaaaaaaaa<br />aaaaaaaaaaa</div> 
    <div class="inner">2</div> 
    <div class="inner">3aaaaaaa</div> 
    <div class="inner">4</div> 
<div /> 

.outer 
{ 
    overflow: hidden; 
    width: 500px; /* or a fixed width */ 
}

CSS：

.inner 
{ 
    float: left; 

    /* style as you please */ 
    border: solid 1px black; 
}

來源

2014-02-06 user1878980

不是示例「CSS表」可以滿足您的需求嗎？ – Huangism

「css table」示例的問題是我無法設置特定的寬度。由於寬度取決於產品圖像，因此寬度不會相同。 – user1878980

產生小提琴，讓我們玩弄它 – Huangism

試試這個：

<div class="outer"> 
    <div class="inner">1</div> 
    <div class="inner">2</div> 
    <div class="inner">3</div> 
    <div class="inner">4</div> 
<div />

的CSS：

.outer 
{ 
    overflow: hidden; 
    width: 80%; /* or a fixed width */ 
} 

.inner 
{ 
    float: left; 

    /* style as you please */ 
    width: 64px; 
    height: 64px; 
}

外div會調整其高度以適應所包含的物品，而內部物品將始終保持其確切的尺寸。當外部div太小時，內部盒子將流向新線。這不是你想要的嗎？

來源

2014-02-06 20:51:11 pid

問題是，我不知道高度。這取決於產品形象。 – user1878980

我明白。沒有JavaScript，我無法幫助你。我所能做的只是：向您展示一個非常相似的頁面，但它可能非常不相關。希望這是一個很好的例子，你可以做什麼：[佈局不同高度框服務器端]（https://www.eqnlandmark.com/） – pid

我想我可以用PHP獲得圖像寬度（這是比JavaScript更安全）。當我得到圖像寬度時，我可以計算div寬度，因此您的解決方案可以工作。謝謝！ – user1878980

DIV等高，流體寬度和各種色譜柱

回答

相關問題