Question

如何创建三个div的响应式排列，例如：

当视口较窄时，三个div在另一个
当视口是平均值时，第一个div在其他两个上面显示全宽，它们是并排的并且具有相等的高度
当视口宽时，三个div以高度相等的方式并排出现

我希望解决方案得到浏览器的广泛支持。

我已尝试过多种基于媒体查询的策略，如下所示：

要实现＃1，我将每个div设置为 <hibernate-mapping> <class name="pack1.Persoana" table="PERSOANA"> <id name="id" type="int"> <column name="ID" /> <generator class="assigned" /> </id> <property name="nume" type="java.lang.String"> <column name="NUME" /> </property> <property name="varsta" type="int"> <column name="VARSTA" /> </property> </class> </hibernate-mapping>
要实现＃2，我将绿色和蓝色div设置为display:block，并创建一个使用display:table-cell设置样式的容器div。

但是，如果我为所有三个元素创建另一个容器div并使用display:table设置样式，则以下两种方法都不起作用：

将所有div设置为display:table - 因为红色表格单元格和其他两个由较小的容器div进行干预
将红色div和较小的容器div设置为display:table-cell - 因为较小的容器div仍然需要设置为display:table-cell，以便其中的绿色和蓝色div。

这有点难以解释，但我猜你有这个想法。任何帮助将不胜感激。

谢谢！

编辑：我不想手动设置任何div的高度。它应该由其内容决定

Answer 1

我知道@fauxserious已经发布了一个非常相似的答案，但我会发布我的帖子，因为它有点不同。

这不使用表格，也不使用::before或::after CSS伪元素。

＆＃13;

div#div1 {
    background-color: red;
}
div#div2 {
    background-color: green;
}
div#div3 {
    background-color: blue;
}
div {
    box-sizing: border-box;
    padding: 20px;
    float: left;
    margin: 1%;
    width: 31%;
}
@media screen and (max-width: 750px) {
    div#div1 {
        width: 98%;
    }
    div#div2, div#div3 {
        width: 48%;
    }
}
@media screen and (max-width: 500px) {
    div {
        width: 98% !important;
    }
}

＆＃13;

<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>

＆＃13;

（如果您在新的标签/窗口中打开它并调整其大小，最好看到上面的代码段。）

请参阅JSFiddle.net上的working example。

编辑查看更新后的代码段。如果您移除了height的{{1}}属性（并将其替换为div，以便即使它是空的也可以看到它，那么高度将被确定按其内容。

Answer 2

您尝试实现的目标使用display: table相当困难，因为您遇到的问题是：需要容器，并且由于表格的方式，配置不够灵活。严格的要求。

我建议您使用现在具有相当不错的浏览器覆盖范围的flexbox：http://caniuse.com/#feat=flexbox

以下是如何使用flexbox获取相等高度行的一个很好的示例：http://osvaldas.info/flexbox-based-responsive-equal-height-blocks-with-javascript-fallback

Answer 3

编辑：抱歉，我错过了相同高度的部分。

你正试图制作正方形，所以让我编码然后解释。我打算把它作为一个列表来帮助识别事物。假设ul已被重置（没有边距，填充或样式类型）。

<ul>
   <li>
      <div>
      </div>
   </li>
   <li>
      <div>
      </div>
   </li>
   <li>
      <div>
      </div>
   </li>
</ul>

这是制作一切正方形的CSS。

li{
   position:relative;
   width:33%;
   padding-top:33%;
}

li > div{
   position:absolute;
   top:0;
   left:0;
   right:0;
   bottom:0;
   height:100%;
   width:100%;
}

您会注意到填充等于宽度。填充百分比无论在何处使用都取决于父元素的宽度（边距也可以这样工作）。即使你在顶部或底部使用它。

现在我们可以使用CSS进行定位

ul:before, ul:after{
   content:"";
   display:table;
}

ul:after{
   clear:both;
}

li{
   position:relative;
   width:33%;
   padding-top:33%;
   float:left;
}

@media screen and (max-width:800px){
   li{
      width:50%;
      padding-top:50%;
   }

   li:first-child{
      width:100%;
      padding-top:0; /* Not sure what height you'd want here*/
   }
}

@media screen and (max-width:400px){
   li{
      width:100%;
      padding-top:100%;
   }
}

Answer 4

我不确定你为什么要使用 display：table; ，但是我做了一些不同的事情，但看起来就像你上面发布的图片。

HTML：

<div class="container">
    <div class="box box1"></div>
    <div class="box box2"></div>
    <div class="box box3"></div>
</div>

CSS：

.container {
    width: 90%;
    margin: 0 auto;
}

.box {
    width: 32.3333%; 
    float: left;
    height: 200px;
    margin: .5%;
}

.box1 {
    background-color: #ff4034;
}

.box2 {
    background-color: #22ff62;
}

.box3 {
    background-color: #24a6ff;  
}

@media screen and (max-width: 900px){
    .box:first-child {
        width: 99%;
    }

    .box:nth-child(n + 2){
        width: 49%;
    }
}

@media screen and (max-width: 436px){
    .container .box {
        width: 99%;
        clear: both;
        margin-bottom: 10px;
    }
}

结果：您的图片

Answer 5

如何使用flex？

＆＃13;

.parent {
    border: 1px solid #555;
    display: flex;
    flex-flow: row wrap;
}
.dual {
    display: flex;
    flex-flow: row wrap;
    flex: 2 2 550px;
}
.item {
    padding: 20px;
    margin: 10px;
    flex: 1 1 200px;
    min-width: 200px;
}

＆＃13;

<div class="parent">
    <div class="item" style="background-color: red">red</div>
    <div class="dual">
        <div class="item" style="background-color: green; flex: 1 1 100px">green</div>
        <div class="item" style="background-color: blue; flex: 1 1 100px">blue</div>
    </div>
</div>

＆＃13;

由于填充和边距，我不得不调整一些尺寸，例如＆＃34; .dual＆＃34;是550px而不是400px。此外，如果组合的项目大小相同，它们将在第二列中显示为两行，有时缩小时我会将它们缩小。在运行代码段时将其设为完整页面，或者查看更容易调整大小的fiddle link，其中有一些额外的文字显示蓝色和绿色框在布局2中保持相同的高度。

如何使用display：table和no JS创建三个响应式div？

5 个答案: