html - 具有 max-width 的 div 不是子 div 的宽度，而是 max-width 值

Question

我有三个并排垂直对齐的 div。第一个 div 有最大宽度，但由于某种原因，div 比内容大。它是为 max-width 设置的宽度。我希望 div 缩小到 child 指定的宽度。

这是代码笔中的示例: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

要实现您的目标，您可能需要使用 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