CSS：将div放置在标题中左/中/右 [英] CSS: Placing divs left/center/right inside header

问题描述

我一直在尝试创建具有以下结构的网站：

所需的结构http：// i50.tinypic.com/vhw076.png

但我似乎无法获得标题正确（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

上面的代码给了我this：
当前结果http://i46.tinypic.com/2mg87ya.png
但是我想要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 填充可用空间< >就可以了。因此， 如果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  与 overflow：hidden 。您 可以通过反转html的顺序对1 执行相同操作完全和设置2& 3到 float：right ，其中1具有 overflow：hidden 。对我来说，看起来最好有中间flex，但你知道你的应用程序比我更好。
 
I've been trying to create a site with the following structure:

desired structure http://i50.tinypic.com/vhw076.png

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: 
current result http://i46.tinypic.com/2mg87ya.png
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屋！