CSS。将divs置于标题内的左/中/右位置[英] CSS: Placing divs left/center/right inside header

本文是小编为大家收集整理的关于CSS。将divs置于标题内的左/中/右位置的处理方法,想解了CSS。将divs置于标题内的左/中/右位置的问题怎么解决?CSS。将divs置于标题内的左/中/右位置问题的解决办法?那么可以参考本文帮助大家快速定位并解决问题。

问题描述

我一直在尝试创建一个具有以下结构的网站:
所需结构

,但我似乎无法使标头正确正确(左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;
}

有人可以给我提示我能做的吗?该结构将在移动网站上使用.

更新

我上面的代码给了我这一点: 当前结果 但是我想要2个中心,而3位在右侧.我不想将宽度设置为百分比,因为元素中的内容可能会有所不同,这意味着可能是20/60/20-10/80/10-33/33/33或其他东西.

推荐答案

利用溢出的魔法:隐藏

如果您可以交换2和3的HTML位置,例如:

<div id="header-e1">
    1 is wider
</div>
<div id="header-e3">
    3 is also
</div>
<div id="header-e2">
    2 conforms
</div>

然后,您可以设置此CSS,该CSS会导致2 "填充"可用的空间 因为上面有overlow: hidden.因此, 如果1&3展开,2个narrows (缩小窗口向下缩小窗口尺寸很小的情况).

#header-e1 {float: left;}
#header-e2 {overflow: hidden;}
#header-e3 {float: right;}

从技术上讲,您可以在1&2和 上保留当前的HTML订单和float: left用overflow: hidden使3 flex div .您 可以通过完全逆转html的顺序来对1 做同样的事情并将2&3设置为float: right,其中1个具有overflow: hidden.对我来说,这似乎最好具有中间的弹性,但是您比我更了解您的应用程序.

其他推荐答案

如果您想用响应宽度进行响应宽度,则可以尝试以下(33%约为三分之一):

#header-e1 {
    float: left;
    width:33%;
    border: 1px solid black;
}

#header-e2 {
    float: left;
    width:33%;
    border: 1px solid black;
}

#header-e3 {
    float: left;
    width:33%;
    border: 1px solid black;
}

您也可以将固定宽度用于Divs.如果您想要彼此越远,您可以使用他们的左/右边缘等.希望有帮助!

这是没有宽度的编辑:

#wrapper {
    position:relative; (add to wrapper)
}

#header-e1 {
    position:absolute;
    left:0;
    border:1px solid black;
}

#header-e2 {
    position:absolute;
    left:50%;
    border:1px solid black;
}

#header-e3 {
    position:absolute;
    right:0;
    border: 1px solid black;
}

其他推荐答案

您需要给标头中的divs一个宽度,然后向左float标题.

注意:它们都具有相同的CSS属性,因此只要给它们等相同的类,例如.headerdivs,然后您没有重复代码

编辑:这是一个工作的JSFIDDLE: http://jsfiddle.net.net/endpg/

本文地址:https://www.itbaoku.cn/post/565775.html