Question

我正在尝试用这样的三个元素制作一个迷你画廊网格：

-----------------------      -----------------------
-                     -      -                     -
-                     -      -                     -
-                     -      -       element 2     -
-     element 1       -      -                     -
-                     -      -                     -
-                     -      -----------------------
-                     -      -----------------------
-                     -      -                     -
-                     -      -                     -  
-                     -      -    element3         -   
-                     -      -                     -
-                     -      -                     -
-                     -      -                     -
- - - - - - - - - - - -      -----------------------

所有这三个元素都在名为.gallery的CSS类中，而element 2和element 3位于名为.small的CSS类中。

我试图制作一个人，但我会在移动网站上使用该脚本。我的代码正在运行，但是当我调整浏览器窗口大小时，元素2和3向左浮动。

CSS：

.gallery li{
  background: #ccc;
  width:100px;
  height: 100px;
  margin: 1%;
  list-style: none;
  float: left;
}

.gallery .big{
  height: 205px;
  width:48%;
}

.gallery .small{
  height:100px;
  width: 48%;
}

HTML：

<div class="gallery">
  <li class="big"></li>
  <li class="small"></li>
  <li class="small"></li>
</div>

感谢您的帮助！

Answer 1

以下改进的CSS没有遇到此问题。

.gallery li{ 
    background: #ccc;
    width:100px;
    height: 100px;
    margin: 1%;
    list-style: none;
}

.gallery .big {
    height: 205px;
    width:48%;
    float: left;
}

.gallery .small{
    height:100px;
    width: 48%;
    float: right;
}

Answer 2

我认为我有你想要的东西。这是一个改变边距的简单方法。您可能想要更多地玩它。我还建议，不要只是宽度重新调整到veiwport，我的高度应该相同，长宽比对你来说很好。

HTML：

<div class="gallery">
  <li class="big"></li>
  <li class="small"></li>
  <li class="small"></li>
</div>

CSS：

    .gallery li{
background: #ccc;
width:100px;
height: 100px;
margin: 1%;
list-style: none;
float: left;
}

.gallery .big{
height: 220px;
width:48%;
margin-right: 3px;
margin-top: 10px;
margin-left: 10px;
}

.gallery .small{
height:100px;
width: 48%;
margin: 10px;
}

一个div块高于另一个

2 个答案: