css：在擴展父項時匹配元素的寬度

我有一個包含多個子行的設置寬度的div（作爲其父項的百分比）。我希望這些行的寬度始終相互匹配 - 因此具有最寬內容的行將確定其他行的寬度。但是，此寬度也可能大於包含div，在這種情況下，div需要展開以容納子行。css：在擴展父項時匹配元素的寬度

這裏是我的HTML：

<div class="outer"> 
    <div class="inner"> 
     <div class="block-wrapper"> 
      <h2>First heading</h2> 
      <h2>Another heading</h2> 
      <h2>The third heading which could be quite long</h2> 
     </div> 
    </div> 
</div>

和電流CSS：

.outer { 
    width:1000px; 
    background-color:#000; 
    height:1000px; 
} 
.inner { 
    width: 80%; 
    background-color:#FFF000; 
    height:50%; 
} 
.block-wrapper { 
    width: 40%; 
    background-color:#fff000; 
    height:100%; 
} 
h2 { 
    font-size:18px; 
    width: 100%; 
    float: left; 
    clear: left; 
    line-height: 40px; 
    margin-top: 10px; 
    padding:1%; 
    background-color:rgba(0,0,0,0.75); 
}

這裏是一個JS Fiddle。

所以我的問題是第三行那裏，「第三個標題 ...」應該都在一行，其他h2行擴大到相同的寬度。 h2行的最小寬度應該是父div的寬度。

我希望這是有道理的...任何想法？

來源

2014-09-26 Inigo

喜歡這個？ http://jsfiddle.net/ctahz387/ – 2014-09-26 10:54:08

用width:auto和display:inline-block更新您的.block-wrapper。

.block-wrapper { 
width: auto; 
min-width:40%; 
background-color:#fff000; 
height:100%; 
display:inline-block; 
}

DEMO

來源

2014-09-26 11:01:53

謝謝，Suresh，這是好的（我可以使用它），雖然它不是*完全*我想要的 - 我也需要能夠設置*最小值所有h2s的寬度*作爲主（外部）div *的百分比*（...我認爲我可以通過給block-wrapper div分配寬度，然後將h2s設置爲最小寬度：100％ ...或其他） – Inigo 2014-09-26 11:05:46

是的。 ''.block-wrapper'類可以添加'min-width：60％'。 – 2014-09-26 11:07:09

你明白了。謝謝你的幫助。（更新小提琴在這裏：http://jsfiddle.net/Inigo/vav5skfb/）如果你想用完整的CSS更新你的答案，我會接受它。乾杯。 – Inigo 2014-09-26 11:10:16

inline-block的和寬度：自動在您的.block，包裝應該有所幫助。另外，您需要在h2上減少1％的填充量以避免混淆。還有，你可以添加在其他方面。

http://jsfiddle.net/guxkcqyz/

.outer { 
    min-width:1000px; 
    background-color:#000; 
    height:1000px; 
} 

.inner { 
    width : 80%; 
    background-color:#FFF000; 
    height:50%; 
} 

.block-wrapper { 
    background-color: red; 
    width : auto; 
    display : inline-block; 
    height:100%; 
} 

h2 { 
    font-size:18px; 
    line-height: 40px; 
    margin-top: 10px; 
    background-color:rgba(0,0,0,0.75); 
}

來源

2014-09-26 11:07:15

css：在擴展父項時匹配元素的寬度

回答

相關問題