Question

我正在尝试将div标签放在页面上（内容与内容无关）。我能够做到这一点并且页面看起来很棒，但是它完全被任意边缘与任意边缘一起破解以使事情正确对齐。有人能指出一个简单的.css解决方案来拉取一个看起来像附加图像的结构的页面吗？

Answer 1

您可以使用没有flex或网格布局的纯CSS。以下是使用Bootstrap的示例：

<div class="container">
  <div class="block row"></div>
  <div class="clearfix row row2">
    <div class="col-sm-6 col"><div class="block"></div></div>
    <div class="col-sm-6 col"><div class="block"></div></div>
  </div>
  <div class="block row"></div>
  <div class="clearfix row row4">
    <div class="col-sm-4 col"><div class="block"></div></div>
    <div class="col-sm-4 col"><div class="block"></div></div>
    <div class="col-sm-4 col"><div class="block"></div></div>
  </div>
</div>

.block {
  background: blue;
  height: 30px;
}
.row {
  margin-bottom: 20px;
}
.row .col:first-child {
  padding-left: 0;
}
.row .col:last-child {
  padding-right: 0;
}
.row4 .col {
  padding: 0 30px;
}

这是jsfiddle。

Answer 2

您可以使用与 float 属性相关联的百分比宽度来执行您想要的操作。

浮动：https://www.w3schools.com/css/css_float.asp

例如：

<强> HTML：

<div class="header"></div>
<div class="second-container">
    <div class="left">
    </div>
    <div class="right">
    </div>
</div>
<div class="third-container">
</div>
<div class="fourth-container">
    <div class="left">
    </div>
    <div class="middle">
    </div>
    <div class="right">
    </div>
</div>

<强> CSS：

  .header{
    width:90%; 
    height:50px; 
    margin:5%; 
    background-color:blue;
  }

  .second-container{
    height:80px; 
    width:90%;
    margin:5%;
  }

  .second-container .left{
    height:100%; 
    width:40%; 
    margin-left:5%;
    margin-right:5%;
    float:left; 
    background-color:blue;
  }

  .second-container .right{
    height:100%;
    width:40%; 
    margin-left:5%;
    margin-right:5%;
    float:left; 
    background-color:blue;
  }

  .third-container{
    height:50px;
    width:90%;
    background-color:blue;
    margin:5%;
  }

  .fourth-container{
    height:70px;
    width:90%;
    margin:5%;
  }

  .fourth-container .left{
    background-color:blue;
    height:100%;
    width:29%;
    margin-right:2%;
    margin-left:2%;
    float:left;
  }

  .fourth-container .middle{
    background-color:blue;
    height:100%;
    width:30%;
    margin-right:2%;
    margin-left:2%;
    float:left;
  }

  .fourth-container .right{
    background-color:blue;
    height:100%;
    width:29%;
    margin-right:2%;
    margin-left:2%;
    float:left;
  }

当然，如果您想调整自己想要的方式，可以使用保证金值。如果你希望它看起来不错，只需要为同一条线提供100％的总和。

JSFiddle here ：https://jsfiddle.net/zg1u2dnu/

Answer 3

嗯......有很多方法可以得到这个结果。如果您想使用纯HTML / CSS， Flexbox 可能是最方便的解决方案：

#wrapper {
  width: 85%;
  margin: auto;
  display: flex;
  flex-direction: column;
}

#wrapper > div {
  margin: 10px;
}

.blue {
  background-color: #4F81BD;
}

#top, #middle-bottom {
  height: 100px;
}

#middle-top, #bottom {
  height: 180px;
  display: flex;
  justify-content: space-between;
}

#middle-top > div {
  width: 45%;
}

#bottom > div {
  width: 30%;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Flexbox demo</title>
</head>
<body>
  <div id="wrapper">
    <div id="top" class="blue"></div>
    <div id="middle-top">
      <div class="blue"></div>
      <div class="blue"></div>
    </div>
    <div id="middle-bottom" class="blue"></div>
    <div id="bottom">
      <div class="blue"></div>
      <div class="blue"></div>
      <div class="blue"></div>
    </div>
  </div>
</body>
</html>

但是，像Vanilla JS一样，这在所有网络浏览器中都无法正常工作......我建议您使用前端框架，例如Bootstrap，Foundation或{{3为获得最佳结果。

试图将html div放在页面上

3 个答案: