我对HTML相对较新,而且我已经搜索了一段时间,但是无法提出某些内容,或者我的搜索字词可能不对。
无论如何,我熟悉边界布局(北,南,西,东,中),但我无法理解的是如何在不同的事物中对齐我的元素。
例如:
|-----------------------------------------------------|
| Navbar goes here |
|-----------------------------------------------------|
| |
| --------------------- -------------------- |
| |Box1| | |Box2| | |
| |---- | |---- | |
| | | -------------------- |
| | | |
| | | -------------------- |
| | | |Box3| | |
| | | |---- | |
| --------------------- -------------------- |
| |
| -------------------------------------------------- |
| |Box4| | |
| |---- | |
| | | |
| -------------------------------------------------- |
------------------------------------------------------
可以通过边框布局实现上述功能吗?或者我错过了什么?
我提出了另一个StackOverflow post,但提到的css代码使我的框彼此重叠。
答案 0 :(得分:1)
我现在已经做了很长时间了。
<强> HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav>
<div class="container">
<div>
<div>Box 1</div>
<div>
<div>Box 2</div>
<div>Box 3</div>
</div>
</div>
<div>Box 4</div>
</div>
<强> CSS:
html, body, .container {
height: 100%;
background-color: white;
}
.container {
display: flex;
flex-direction: column;
margin-top: 50px;
}
.container div {
margin: 10px;
flex: 1;
background-color: blue;
}
.container > div:nth-child(2) { }
.container > div:first-child {
display: flex;
background-color: white;
}
.container > div:first-child > div:first-child {
margin-right: 20px;
}
.container > div:first-child > div:nth-child(2) {
display: flex;
flex-direction: column;
background-color: white;
}
.container > div:first-child div {
flex: 1;
margin: 0;
}
.container > div:first-child > div:nth-child(2) > div:first-child {
margin-bottom: 20px;
}
.container > div:last-child { }
<强> JSFIDDLE
为了获得您想要的设计,您需要使用flex
css属性。一些例子是here。和文档是here。
名称建议的div:nth-child()
用于查找属于父div nth div
的{{1}}。在第一行中,您需要水平弯曲,第二行本身必须是垂直弯曲。 container
将导致垂直弹性显示。
我希望我能正确解释。
答案 1 :(得分:0)
检查出来.. 这为您提供了完全相同的设计..
<div class="container">
<nav>
Navbar goes here
</nav>
<div class="second">
<div class="box1">box1</div>
<div class="inner">
<div class="box2">box2</div>
<div class="box3">box3</div>
</div>
</div>
<div class="box4">box4</div>
</div>
<style>
*{
margin: 0;
padding: 0;
border: 0;
box-sizing: content-box;
}
.container{
display: block;
width: 100%;
}
nav{
display: block;
background: #000;
color: white;
text-align: center;
padding: 20px;
}
.second{
display: flex;
}
.second .box1{
width: 100%;
height: 80vh;
background: #d2c3c3;
}
.second .inner{
width: 100%;
}
.second .inner .box2{
height: 40vh;
background: #ddd;
}
.second .inner .box3{
height: 40vh;
background: #9e8181;
}
.box4{
display: block;
background: #000;
color: white;
padding: 20px;
}
</style>