CSS:将div放置在标题中左/中/右 [英] CSS: Placing divs left/center/right inside header
问题描述
我一直在尝试创建具有以下结构的网站:
但我似乎无法获得标题正确(e1左,e2居中,e3右)。我想要三个元素e1,e2和e3左,中,右定位。这是我想要的:
< div id =wrapper>
< div id =header>
< div id =header-e1>
1
< / div>
< div id =header-e2>
2
< / div>
< div id =header-e3>
3
< / div>
< / div>
< div id =nav>
links
< / div>
< div id =content>
content
< / div>
< div id =footer>
footer
< / div>
< / div>
使用此css:
#wrapper
{
width:95%;
margin:20px auto;
border:1px solid black;
}
#header
{
margin:5px;
}
#header-e1
{
float:left;
border:1px solid black;
}
#header-e2
{
float:left;
border:1px solid black;
}
#header-e3
{
border:1px solid black;
}
#nav
{
margin:5px;
}
#content
{
margin:5px;
}
#footer
{
margin:5px;
}
有人可以给我提示我可以做什么?该结构将在移动网站上使用。
UPDATE
我上面的代码给了我这个:
但是我想要2居中,而右边3。我不想将宽度设置为百分比,因为元素中的内容可能不同,这意味着它可能是20/60/20 - 10/80/10 - 33/33/33或其他内容。
使用溢出的魔法:隐藏
如果你可以交换2& 3这样:
< div id =header-e1>
1更宽
< / div>
< div id =header-e3>
3也是
< / div>
< div id =header-e2>
2符合
< / div>
然后你可以设置这个css,这将导致2 overlow:hidden 的原因,net / ZNGsh / 3 / =nofollow> 填充可用空间<在上面。因此, 如果1& 3 expand,2 narrows (向下缩小窗口以查看真正小尺寸会发生什么)。
#header-e1 {float:left;}
#header-e2 {overflow:hidden;}
#header-e3 {float:right;}
c> c>在1& 2并使用溢出 make 3 the flex div :hidden
。您 可以对1 执行相同操作,方法是完全颠倒html的顺序并设置2& 3到 float:right
,其中1具有 overflow:hidden
。对我来说,看起来最好有中间flex,但你知道你的应用程序比我更好。
I've been trying to create a site with the following structure:
But I can't seem to get the header correct (e1 left, e2 centered, e3 right). I want the three elements e1, e2 and e3 to be left, middle and right positioned. This is what I'm trying:
<div id="wrapper">
<div id="header">
<div id="header-e1">
1
</div>
<div id="header-e2">
2
</div>
<div id="header-e3">
3
</div>
</div>
<div id="nav">
links
</div>
<div id="content">
content
</div>
<div id="footer">
footer
</div>
</div>
With this css:
#wrapper
{
width: 95%;
margin: 20px auto;
border: 1px solid black;
}
#header
{
margin: 5px;
}
#header-e1
{
float: left;
border: 1px solid black;
}
#header-e2
{
float: left;
border: 1px solid black;
}
#header-e3
{
border: 1px solid black;
}
#nav
{
margin: 5px;
}
#content
{
margin: 5px;
}
#footer
{
margin: 5px;
}
Can someone give me tips to what I can do? The structure is going to be used on a mobile website.
UPDATE
The code I have above gives me this:
But I want the 2 centered and the 3 on the right side. I don't want to set the width to a percent because the content in the elements may vary, meaning it may be 20/60/20 - 10/80/10 - 33/33/33 or something else.
解决方案 Utilize the Magic of Overflow: Hidden
If you can swap the html position of 2 & 3 like so:
<div id="header-e1">
1 is wider
</div>
<div id="header-e3">
3 is also
</div>
<div id="header-e2">
2 conforms
</div>
Then you can set this css which will cause 2 to "fill" the available space because of the overlow: hidden
on it. So if 1 & 3 expand, 2 narrows (shrink window down to see what happens at really small size).
#header-e1 {float: left;}
#header-e2 {overflow: hidden;}
#header-e3 {float: right;}
Technically, you could keep your current html order and your float: left
on both 1 & 2 and make 3 the flex div with overflow: hidden
. You could do the same with 1 by reversing the order of the html completely and setting 2 & 3 to float: right
with 1 having overflow: hidden
. To me it would seem best to have the middle flex, but you know your application better than I.
这篇关于CSS:将div放置在标题中左/中/右的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!