[英]Align header elements with left middle right order
I want to align my elements in my header so they are positioned, like this:我想在我的标题中对齐我的元素,以便它们被定位,如下所示:
LOGO SEARCH LINK|LINK
The logo begins on far left, while the search is in middle, and the links on the right, while that I want the search to be max width of the space between the div's of logo and siteMeta and I don't want to break responsiveness.标志从最左边开始,而搜索在中间,而链接在右边,而我希望搜索是标志的 div 和 siteMeta 之间的空间的最大宽度,我不想破坏响应能力.
body { margin: 0 auto; } .container { border: 1px solid blue; box-sizing: border-box; padding: 0; } #logo { float: left; max-width: 220px; } #search { float: left; max-width: 300px; margin-top: 75px; } #siteMeta { float: left; max-width: 300px; height: 220px; line-height: 220px; }
<div class="container"> <div id="header"> <div id="logo"> <img src="images/logo.png" class="img-responsive"> </div> <div id="search"> <form class="navbar-form" role="search"> <div class="input-group add-on"> <input class="form-control" placeholder="Search" name="srch-term" id="srch-term" type="text"> <div class="input-group-btn"> <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button> </div> </div> </form> </div> <div id="siteMeta"> <a href="#">Link</a> <a href="#">Link</a> </div> </div> </div>
If you want to use flexbox layout, it can be pretty easy. 如果要使用flexbox布局,则可能非常简单。 (browser support IE10+ with prefixes)
(浏览器支持带前缀的IE10 +)
#header { display: flex; align-items: center; } #search { background: pink; flex: 1; text-align: center; }
<div id="header"> <div id="logo">Logo</div> <div id="search">Search</div> <div id="siteMeta">Link</div> </div>
If you do need to support IE9 and IE8, similar layout can be achieved by using CSS table. 如果确实需要支持IE9和IE8,则可以使用CSS表实现类似的布局。
#header { display: table; width: 100%; } #logo, #search, #siteMeta { display: table-cell; vertical-align: middle; white-space: nowrap; } #search { background: pink; width: 100%; text-align: center; }
<div id="header"> <div id="logo">Logo</div> <div id="search">Search</div> <div id="siteMeta">Link</div> </div>
You can solve this with the calc
value for the width
property.您可以使用
width
属性的calc
值解决此问题。
I've had to add the following things to your css.我不得不将以下内容添加到您的 css 中。 I've replaced your
max-width
properties with width
and added some backgrounds to better observe the result.我已经更换了你
max-width
与性能的width
并添加了一些背景,以更好地观察结果。
#search{
width: calc(100% - 220px - 300px);
}
#search input {
width: 100%;
box-sizing: border-box;
}
#siteMeta{
width: 300px;
}
#logo{
width: 220px;
}
https://jsfiddle.net/9h3zm2sc/ https://jsfiddle.net/9h3zm2sc/
If you want a wider range of support you can also solve it with the following:如果您想要更广泛的支持,您还可以通过以下方式解决:
* {
box-sizing: border-box;
}
#search{
width: 100%;
position: absolute;
top: 0;
left: 0;
padding-left: 220px; /* width of the logo */
padding-right: 300px; /* width of the siteMeta */
}
#siteMeta{
float: right;
}
https://jsfiddle.net/mehabrzz/1/ https://jsfiddle.net/mehabrzz/1/
You can make #header
a table, and its children elements table-cells
having width: 33%;
您可以将
#header
表格,其子元素table-cells
width: 33%;
: :
body { margin: 0 auto; } .container { border: 1px solid blue; box-sizing: border-box; padding: 0; } #header { display: table; width: 100%; } #header > * { display: table-cell; width: 33%; } #logo { } #search { margin-top: 75px; text-align: center; } #siteMeta { text-align: right; height: 220px; line-height: 220px; }
<body> <div class="container"> <div id="header"> <div id="logo"> <img src="images/logo.png" class="img-responsive"> </div> <div id="search"> <form class="navbar-form" role="search"> <div class="input-group add-on"> <input class="form-control" placeholder="Search" name="srch-term" id="srch-term" type="text"> <div class="input-group-btn"> <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i> </button> </div> </div> </form> </div> <div id="siteMeta"> <a href="#">Link</a> <a href="#">Link</a> </div> </div>
CSS Tables can do this. CSS 表格可以做到这一点。
A simplified layout简化的布局
.container { display: table; width: 100%; border: 1px solid grey; } #header, #logo, #search, #siteMeta { display: table-cell; } #siteMeta a { display: table-cell; padding: 0 1em; text-align: center; } #search { width: 100%; text-align: center; background: lightblue; }
<div class="container"> <div id="header"> <div id="logo"> LOGO </div> <div id="search"> <form class="navbar-form" role="search"> <div class="input-group add-on"> SEARCH </div> </form> </div> <div id="siteMeta"> <a href="#">Link</a> <a href="#">Link</a> </div> </div>
Simply without table and flex:简单地没有 table 和 flex:
body { margin: 0 auto; text-align:center; } #header { width: 100%; } #logo { float:left; width:33%; } #search { float: left; width:33%; } #siteMeta { float: left; width:33%; }
<body> <div class="container"> <div id="header"> <div id="logo"> <img src="images/logo.png" class="img-responsive"> </div> <div id="search"> <form class="navbar-form" role="search"> <div class="input-group add-on"> <input class="form-control" placeholder="Search" name="srch-term" id="srch-term" type="text"> <div class="input-group-btn"> <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i> </button> </div> </div> </form> </div> <div id="siteMeta"> <a href="#">Link</a> <a href="#">Link</a> </div> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.