Question

我有大约6个包含文字和图像的div。它们的长度各不相同，但宽度相同。因此，我想展示我已经取得的Pinterest。

但是，div分为多列。我如何阻止这种情况发生？我使用的CSS位于图像下方。

using (var webClient = new WebClient())
{
    webClient.Headers[HttpRequestHeader.ContentType] = "application/json";
    webClient.UploadData(Url, Encoding.UTF8.GetBytes(firstData));
    webClient.UploadData(Url, Encoding.UTF8.GetBytes(secondData));
}

Answer 1

将 overflow: hidden; 添加到您不希望在Firefox中的列和Chrome中的 display: inline-block 中拆分的项目中。
类似的东西：

.masonry .feedback-box{
    display: inline-block; /* Chrome */
    /*width: 100% !important; ?? */
    overflow: hidden; /* Firefox */
    margin-top: 1rem;
}
.masonry .feedback-box:first-child {
  margin-top: 0;
}

测试笔：http://codepen.io/anon/pen/ojeVmm?editors=010

仅在Firefox和Chrome上测试，而不是在IE11或Safari上测试。

How to prevent column break within an element?

的可能重复

Answer 2

我需要使用 break-inside：avoid; 见下文：

CSS3 - 像pinterest这样的砖石布局 - 列/盒正在拆分

2 个答案: