在HTML中对齐多个元素 [英] Aligning multiple elements in HTML
问题描述
我对HTML相对来说比较陌生，现在我已经搜索了一段时间，但无法提供某些内容，或者我的搜索条件错误。
无论如何，我熟悉边界布局（北，南，西，东，中），但我无法理解的是如何在不同的事情中对齐我的元素。
例如：
| --------------- -------------------------------------- |
| Navbar在这里|
| --------------------------------------------- -------- |
| |
| --------------------- -------------------- |
| | BOX1 | | | BOX2 | | |
| | ---- | | ---- | |
| | | -------------------- |
| | | |
| | | -------------------- |
| | | | BOX3 | | |
| | | | ---- | |
| --------------------- -------------------- |
| |
| -------------------------------------------------- |
| | Box4 | | |
| | ---- | |
| | | |
| -------------------------------------------------- |
---------------------------------------------- --------
像上面这样的东西可以通过边框布局来实现吗？或者我错过了什么？
我想出了另一个StackOverflow / b>我已经在此工作了很长一段时间了。 HTML CSS： 为了获得您想要的设计，您需要使用 我希望我能正确解释它。 I'm relatively new to HTML, and I've googled around for some time now, but was unable to come up with something, or perhaps my search terms were wrong. Anyway, I'm familiar with border layout(North, South, West, East, Center) but what I can't understand is how to align my elements in a different matter. For example: Can something like the above be achieved with border layout? or am I missing something? I came up with another StackOverflow post but the mentioned css code makes my boxes overlap with one another. I worked on this for quite some time now. HTML CSS: In order to have the design you want you need to make use of The I hope I explained it properly. 这篇关于在HTML中对齐多个元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
< script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js>< /脚本>
< 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 =stylesheet/>
< nav class =navbar navbar-inverse navbar-fixed-top>
< div class =container-fluid>
< div class =navbar-header>
< a class =navbar-brandhref =＃> WebSiteName< / a>
< / div>
< ul class =nav navbar-nav>
< li class =active>< a href =＃>主页< / a>< / li>
< li>< a href =＃>页面1< / a>< / li>
< li>< a href =＃> Page 2< / a>< / li>
< li>< a href =＃>第3页< / a>< / li>
< / ul>
< / div>
< / nav>
< div class =container>
< div>
< div>方框1< / div>
< div>
< div> Box 2< / div>
< div>方框3< / div>
< / div>
< / div>
< div>方框4< / div>
< / div>
html，body，.container {
height：100％;
背景颜色：白色;
}
.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：第一个孩子{
display：flex;
背景颜色：白色;
}
.container> div：第一个孩子> div：第一个孩子{
margin-right：20px;
}
.container> div：第一个孩子> div：nth-child（2）{
display：flex;
flex-direction：column;
背景颜色：白色;
}
.container> div：first-child div {
flex：1;
保证金：0;
}
.container> div：第一个孩子> div：第n个孩子（2）> div：第一个孩子{
margin-bottom：20px;
}
.container> div：last-child {}
flex css属性。这里的一些示例是此处。并且文档此处。
div：nth-child（）顾名思义用于查找第n个div 属于父div 容器。在第一行中，你需要一个水平弯曲，第二个框必须是一个垂直弯曲。 flex-direction：column; 将导致垂直的flex显示。
|-----------------------------------------------------|
| Navbar goes here |
|-----------------------------------------------------|
| |
| --------------------- -------------------- |
| |Box1| | |Box2| | |
| |---- | |---- | |
| | | -------------------- |
| | | |
| | | -------------------- |
| | | |Box3| | |
| | | |---- | |
| --------------------- -------------------- |
| |
| -------------------------------------------------- |
| |Box4| | |
| |---- | |
| | | |
| -------------------------------------------------- |
------------------------------------------------------
<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>
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 { }
flex css property. Some examples of this are here. and documentation is here.div:nth-child() as the name suggest is used to find the nth div belonging to the parent div container. In the first row you needed an horizontal flex and the second box must itself be a vertical flex. flex-direction: column; will lead to a vertical flex display.
