汽車寬度的div盒

這可能已經回答了幾次，但我無法找到這個答案，我的具體問題。汽車寬度的div盒

<div class="wrapper"> 
<div class="project"> 
    <div class="media"></div> 
    <div class="text">Text</div> 
</div> 
<div class="project"> 
    <div class="media"></div> 
    <div class="text">Text</div> 
</div> 
<div class="project"> 
    <div class="media"></div> 
    <div class="text">Text</div> 
</div>

.media{ 
width: 300px; 
height:200px; 
background-color:red; 
margin-bottom:1em; 
} 

.text{ 
margin-bottom:2em; 
} 

.project{ 
display: inline-block; 
margin-left: 1em; 
margin-right: 1em; 
} 

.wrapper{ 
margin-top: 1.65em; 
width: 100%; 
}

我的問題是如何得到的.media自動貼合在寬度，使紅色箱子總是使用所有的可用的空間，並仍然保持利潤率當然？

謝謝！

來源

2014-01-15 Morten

你想要紅色方塊放在同一排還是疊在一起？ – anthonygore

在同一行中。我認爲這些盒子應該有一些最小寬度。例如：當盒子的寬度小於20％時，例如，它跳到下一行，其中有兩個盒子，而不是三個盒子。我希望你明白:-) – Morten

和你想要的文本？ – anthonygore

我用你的小提琴，所以名字在我的答案中有點不同。

這是通過創建媒體元素的包裝的解決方案：

<div class="project_container_parent"> 
    <div class="project_container_child"> 
     <div class="media_parent"><div class="media"></div></div> 
     <div class="text">Text</div> 
    </div> 
    <div class="project_container_child"> 
     <div class="media_parent"><div class="media"></div></div> 
     <div class="text">Text</div> 
    </div> 
    <div class="project_container_child"> 
     <div class="media_parent"><div class="media"></div></div> 
     <div class="text">Text</div> 
    </div> 
</div>

和設置這樣的CSS：

.media{ 
    width:100%; 
    height:200px; 
    background-color:red; 
    margin-bottom:1em; 
} 

.media_parent{ 
    margin-left:1em; 
    margin-right:1em;  
} 

.text{ 
    margin-bottom:2em; 
} 

.project_container_child{ 
    display: inline-block; 
    width:100%; 
} 

.project_container_parent{ 
    margin-top: 1.65em; 
}

下面是修改後的提琴：http://jsfiddle.net/LPGGh/13/

來源

2014-01-15 22:39:33 useSticks

嘿，謝謝你的答案，但那不是我要找的。例如：如果你有兩個盒子在一排上有一些額外的空白在右邊（使用我的小提琴來做到這一點：http://jsfiddle.net/LPGGh/），我希望他們自動適合填充所有這個空白區域的寬度。 – Morten

汽車寬度的div盒

回答

相關問題