如何限制內嵌塊元素內的子元素寬度？

我怎樣才能約束一個inline-block元素內的孩子的寬度？如何限制內嵌塊元素內的子元素寬度？

假設我的目標是最新的瀏覽器。

給定使用inline-block顯示的元素，我如何約束一個子元素，使其不會伸縮超出父母的女巫。

在實際應用中，我試圖建立一個系統，將採取任何寬度的圖像，並且保持約束到父容器的寬度標題：

無需指定寬度
而不使用jQuery或其他DOM操作

CSS

<style> 
div { 
    width:800px; 
    background-color:silver; 
    text-align: center; 
} 
figure { 
    display:inline-block; 
    background-color: orange; 
    padding: 1em; 
    margin: 0; 
} 
figcaption { 
    background-color:pink; 
} 
</style>

HTML

<div> 
    <figure> 
     <img src="http://i.techrepublic.com.com/blogs/11062012figure_a.gif" /> 
     <figcaption> 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
     </figcaption> 
    </figure> 
</div>

來源

2013-07-15 mmcglynn

你試過'figure> * {max-width：100％; ''？ –

'最大寬度：100％'會做到這一點。但它將是'div'的寬度，這是唯一一個實際上具有「寬度」集合的人。 – RaphaelDDL

試過了，沒有變化。 – mmcglynn

在我看來添加以下代碼，可以幫助你：

figure {width: 100%;} 
img {width: 100%;}

在任何情況下，如果你想只用CSS來做到這一點，那麼你就需要用百分比玩。

來源

2013-07-15 16:58:05

這個想法是，我想要圖像的寬度來決定圖形容器的寬度和標題。將這兩個設置爲100％都可以，但會消除圖像寬度和變化。 – mmcglynn

如何限制內嵌塊元素內的子元素寬度？

回答

相關問題