Div與最大寬度不是孩子div的寬度，而是最大寬度值而不是

Question

我有三個垂直並排排列的div。第一個div有一個最大寬度，但由於某種原因，div大於內容。它是爲最大寬度設置的寬度。我想讓div縮小到任何兒童指定的寬度。

這裏是代碼筆的例子：http://codepen.io/anon/pen/dYPRLX

<div id="exhibition_title_wrapper"> 
<div id="exhibition_title_name"> 
<div class="artist_name">Steve Greenberg</div>, 
<div class="artist_name">Sarah Thompson</div>, 
<div class="artist_name">Bill Bradbury</div>, 
<div class="artist_name">Tom Rogers</div>, 
<div class="artist_name">Nicole Haight</div> 
<div class="artist_name">Barney Franklin</div>, 
<div class="artist_name">Todd Franklin</div> 
</div> 
<div id="slash"><img src="http://s9.postimg.org/r1gx8okp7/slash.png"></div> 
<div id="exhibition_title_right"> 
<div id="exhibition_title_title">Expo 3000</div> 
<div id="exhibition_title_date">September 1-20, 2017</div> 
</div> 
</div> 

，這是我的CSS

#exhibition_title_wrapper {display:block;} 
#exhibition_title_name {display: table-cell; 
vertical-align: middle; max-width:300px;} 
.artist_name {display: inline-block;} 
#slash {display: table-cell; vertical-align: middle; padding: 0 10px;} 
#exhibition_title_right {display: table-cell; vertical-align: middle;} 
#exhibition_title_title {display:} 
#exhibition_title_date {display:} 

任何人都可以請指導我在正確的方向？

Answer 1

您的表單元素沒有指定寬度，因此使用標準瀏覽器計算來確定寬度。由於第一列的計算寬度超出了您指定的最大寬度，因此它可以作爲限制器。

More

要acheive你以後，你可能想使用flex box。不幸的是，it's not supported in IE < 10，你會想爲IE 10和舊版Android使用-webkit前綴。

#exhibition_title_wrapper { 
    ... 
    display: flex; 
} 
#exhibition_title_right { 
    ... 
    flex-grow: 1; 
} 

Demo

注意，我感動的div裏面的逗號保留位置。如果您在藝術家名稱div之外需要，可以添加另一個包裝元素。

另一種可能性是將藝術家列表簡單地浮起來，儘管這並不保留您可能以後的等高排列。

Demo 2