试图将html div放在页面上

时间:2017-04-14 13:40:00

标签: html css

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

enter image description here

3 个答案:

答案 0 :(得分:4)

您可以使用没有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

答案 1 :(得分:0)

您可以使用与 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/

答案 2 :(得分:0)

嗯......有很多方法可以得到这个结果。如果您想使用纯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一样,这在所有网络浏览器中都无法正常工作......我建议您使用前端框架,例如BootstrapFoundation或{{3为获得最佳结果。