子div高度决定父高？

Question

我有一个父母div,包含两个孩子,并排.第一个孩子是一个图像,必须是高度100%和58%宽度,边距自动和溢出隐藏.第二个子项包含文本,文本的长度决定了父项的高度.这是几个页面的模板,具有不同的文本长度,因此父级高度不同.如果不使用JS,我可以做我想做的事吗？感谢您的输入!代码如下.

HTML:

<div id="product-summary">

  <div class="product-image-container">
    <img />
  </div>

  <div id="product-details">
    <h3 class="product-title"></h3>
    <div class="product-description"></div>
  </div>

</div>

CSS:

.product-image-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 58%;
  height: 100%;
  overflow: hidden;

  img {
    position: absolute;
    top: 0;
    left: 50%;
    margin: auto;
    transform: translateX(-50%);
    min-width: 100%;
    height: 100%;
  }
}

#product-details {
  float: right;
  border: solid thin #777;
  height: ~"calc(100% - 2px)";
  width: 41%;
  text-align: center;
}

Answer 1

问题是您的#product-details浮动,这会创建一个新的BFM(块格式化上下文),并且父级将被折叠.

我建议你在这里阅读更多关于BFM的信息:http://yuiblog.com/blog/2010/05/19/css-101-block-formatting-contexts/

有几种方法可以解决这个问题:

• 您可以清除父级,这样做的方法是添加overflow:hidden; 到#product-summary元素.
• 您可以从#product-details中删除浮动:右键,然后使用flexbox对齐它.