Question

我有三个垂直排列的div。第一个div具有最大宽度，但由于某种原因，div大于内容。它是为max-width设置的宽度。我想让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

为了实现你想要使用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

具有最大宽度的Div不是子div的宽度，而是最大宽度值而不是

1 个答案: