Question

我试图找出当子级包含溢出（显示重叠图像）的div时如何扩展div；

div.container {
  position:relative
}
div.column {
  display: inline-block; // in my case I want to avoid wrapping
  width: 180px;
}
div.item-contains-long-image {
  display: block;
  height: 25px;
  overflow: visible;
  position: relative;
}

我希望容器垂直扩展以包含从内部div溢出的图像。我可以在div的底部添加与图像高度相当的填充，但是我正在寻找一种更好的方法。

Answer 1

@Teobis我以您的答案作为flex示例的基础，希望您不要介意：）

div.container { /* this has been rewritten */
  display: flex;
  flex-direction: row;
}
div.column {
  border:1px solid blue; /*just to show the size*/
  display: inline-block; /* in my case I want to avoid wrapping */
  width: 180px;
  vertical-align:top;
}
div.item-contains-long-image {
  display: inline-block;
  height: 25px;
  /* overflow: visible; no needed, default property*/
  position: relative;
  
}

<div class="container">
      <div class="column">
        <div class="item-contains-long-image">
          <img src="http://via.placeholder.com/180x270">
        </div>
      </div>
      
      <div class="column">
        <div class="item-contains-long-image">
          <img src="http://via.placeholder.com/180x310">
        </div>
      </div>

      <div class="column">
        <div class="item-contains-long-image">
          <img src="http://via.placeholder.com/180x110">
        </div>
      </div>
    </div>

Answer 2

您要寻找的是这种结构吗？

首先，您需要空白：nowrap;在显示的父级上：inline-block; 或者您可以使用flexbox;

div.container {
  position:relative;
  border:1px solid red; /*just to show the size*/
  white-space:nowrap; /*Necesary for no wrap on .column*/
  min-height:150px; /* minimum height */
}
div.column {
  border:1px solid blue; /*just to show the size*/
  display: inline-block; /* in my case I want to avoid wrapping */
  width: 180px;
  vertical-align:top;
}
div.item-contains-long-image {
  display: inline-block;
  height: 25px;
  /* overflow: visible; no needed, default property*/
  position: relative;
  
}

    <div class="container">
      <div class="column">
        <div class="item-contains-long-image">
          <img src="http://via.placeholder.com/180x270">
        </div>
      </div>
      
      <div class="column">
        <div class="item-contains-long-image">
          <img src="http://via.placeholder.com/180x310">
        </div>
      </div>

      <div class="column">
        <div class="item-contains-long-image">
          <img src="http://via.placeholder.com/180x110">
        </div>
      </div>
    </div>

希望这会有所帮助

当div嵌套在溢出中时扩展div

2 个答案: