我正在尝试将div标签放在页面上(内容与内容无关)。我能够做到这一点并且页面看起来很棒,但是它完全被任意边缘与任意边缘一起破解以使事情正确对齐。有人能指出一个简单的.css解决方案来拉取一个看起来像附加图像的结构的页面吗?
答案 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一样,这在所有网络浏览器中都无法正常工作......我建议您使用前端框架,例如Bootstrap,Foundation或{{3为获得最佳结果。