如何使clearfix与溢出自动工作

Question

我正在使用引导程序创建一个响应式布局。布局有三行。最上面一行有两列，它们在小屏幕中垂直堆叠。最上面一行的右列有更多的信息，因此高度比左列高。

在桌面分辨率中，我使用overlfow:hidden属性隐藏了右侧列的内容。然而，在手机分辨率方面，我不希望这些内容被隐藏，因为列是垂直堆叠的。为了实现这一点，我正在使用媒体查询将溢出设置为隐藏。

我目前被卡住的地方是，如果顶行的右列没有overflow:hidden，clearfix doesn't work and the contents of the right column overlaps the second row.
Wondering what i am doing wrong.

Please find the jsfiddle here https://jsfiddle.net/uyxgo70k/2/

Update:

I followed @DigitalDouble advice and made the prototype working. However when i keep the image and content inside a carousel item, height:auto就不起作用。不确定转盘类中的哪个属性阻止了高度：auto生效。

我已经在这里更新了jsfiddle

https://jsfiddle.net/uyxgo70k/7/

Answer 1

这里的问题不是clearfix。问题是：

div.row div {
    height: 100%;
    ...
}
div#top div {
    height: 100%;
}

你给你的容器一个"固定"的高度。因此，除非使用overflow: hidden ，否则内容会溢出容器并悬停在下一行上

快速解决方法是使用媒体查询将height: auto添加到移动设备上的#div-desc中。

@media (max-width: 767px){
    #top #div-desc {
       height: auto;
    }
}

https://jsfiddle.net/uyxgo70k/6/

Answer 2

您已经设置了固定的高度，因此div的布局大小小于内容大小，因此它们将相互重叠。

您应该将高度设置为auto或leave然后取消设置。这对你有帮助吗？https://jsfiddle.net/gmbxgjub/

@media only screen and (min-width : 768px) {
  #div-desc{
      height: 100%;
      overflow:hidden;
  }
  #top{
    height: 40%;
  }
  div#top div{
    height: 100%;
  }
  #top.div img{
    height: 100%;
  }
}

我已将高度定义移动到媒体查询