logo标签列表

CSS: 将div放置在页眉内的左侧/居中/右侧

csshtmlpositioncss-float
21

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

但是我无法正确设置页眉（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;
}

有人能给我一些提示吗？这个结构将用于移动网站。

更新

我现在的代码会生成这样的效果： current result 但是我想让2居中，而3在右侧。我不想设置宽度为百分比，因为元素中的内容可能会变化，即它可能是20/60/20-10/80/10-33/33/33或其他某种组合。

请查看此帖子：https://dev59.com/6XI95IYBdhLWcg3wyBCc - Goose
我本来没有理解你的问题，但是你后来在Paint中发布了你的布局图，一切都很好。 ;) - eggy
6个回答
22

利用Overflow的魔力：隐藏

如果您可以像下面这样交换第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，这将导致2个 "填充" 可用空间，因为它上面有overflow: hidden。所以如果1和3扩展，则2会变窄（缩小窗口以查看在非常小的大小时发生了什么）。

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

从技术上讲，您可以保持当前的html顺序以及1和2的float: left，并使用overflow: hidden将3设置为flex div。通过完全颠倒html的顺序并将2和3设置为float: right，并将1设置为overflow: hidden，同样可以使用与1相同的方法。对我来说，最好的方式似乎是将中间部分设置为flex，但您了解自己的应用程序更好。

这是一个很棒的解决方案，但我有一个问题。e2被拉伸到了最大，而e3超出了边界。 - Sakthivel
@codebrain：您需要描述您的问题（或使用fiddle进行说明），因为我不知道您所说的“e3超出边界”的意思。 - ScottS
1
E1和E2被放置在容器内，而E3则超出了容器。#e1 {float:left;} #e2 {display:inline-block; overflow:hidden;} #e3 {float:right;} 这解决了问题 无论如何，您的解决方案帮了很大的忙，我已经点赞了！ - Sakthivel
你还应该添加 .header{text-align: center;}。 - Michael
5
如果您正在尝试创建一个响应式宽度的网站，您可以尝试以下方法（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;
}

你也可以为div使用固定宽度。如果你想让它们之间的距离更远，可以调整它们的左/右边距等。希望这能帮到你！
以下是不使用宽度的修改：
#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;
}
谢谢，但我想不设置每个元素的宽度来完成。这可行吗？ - L42
嗯......我不确定没有宽度如何与您的内容配合工作，但我想您可以尝试绝对定位。 - RevConcept
我为您修改了我之前的答案。 - RevConcept
1

你需要给头部的div设置宽度，并将header-e3浮动到左侧。

注意：它们都具有相同的CSS属性，因此只需给它们相同的类别，如.headerDivs，然后您就不必重复编写代码了。

编辑：这里是一个可工作的jsfiddle链接：http://jsfiddle.net/eNDPG/

0
                        <style type="text/css">
                        body {
                        margin:0;
                        }
                        #header {
                        width:100%;
                        **strong text**margin:auto;
                        height:10%;
                        background-color:red;
                        }
                        #left {
                        width:20%;
                        float:left;
                        #margin:auto auto auto auto;
                        height:100%;
                        background-color:blue;
                        }
                        #right {
                        float:right;
                        width:20%;
                        #margin:auto auto auto auto;
                        height:100%;
                        background-color:green;
                        }
                        #middle {
                        position:relative;
                        left:0;
                        right:0;
                        margin:auto;
                        height:80%;
                        background-color:yellow;
                        width:100%;
                        }
                        #middle1 {
                        width: 80%;
                        margin:auto;
                        height:45%;
                        background-color:black;
                        }
                        #middle2 {
                        width: 80%;
                        margin:auto;
                        height:40%;
                        background-color:brown;
                        }
                        #middle3 {
                        width: 80%;
                        margin:auto;
                        height:15%;
                        background-color:orange;
                        }
                        #midmain {
                        width: auto;
                        margin:auto;
                        height:100%;
                        background-color:white;
                        }
                        #footer {
                        width:100%;
                        margin:auto;
                        height:10%;
                        background-color:red;
                        }
                        </style>

now check comment for html design.
<body><div id="header"> </div> <div id="middle"> <div id="left"> </div> <div id="right"> </div> <div id="midmain"> <div id="middle1"> </div> <div id="middle2"> </div> <div id="middle3"> </div> </div> </div> <div id="footer"> </div> </body> - P P
0
你可以像这样做：

HTML

<div>
    <div id="left">Left</div>
    <div id="right">Right</div>
    <div id="center">Center</div>
</div>

CSS

#left {
  float: left;
  border: 1px solid red;
}

#right {
  float: right;
  border: 1px solid blue;
}

#center {
  margin-left: 50px;
  margin-right: 50px;
  border: 1px solid green;
  text-align: center;
}
<div> 必须作为 HTML 代码中的最后一个出现。

这里有一个 JS Bin 可以测试：http://jsbin.com/evagat/2/edit

0

我正在使用与RevCocnept建议的width: 33%类似的想法，只不过是使用display: inline-block而不是float: left。这是为了避免将#header内部的div元素从页面流中移除，并导致#header的高度变为零。

#header > div {
    display: inline-block;
    width: 31%;
    margin: 5px 1%;
}

演示

谢谢，但我想不设置每个元素的宽度来完成。这可行吗？ - L42
@user1539208 我不确定是否有简单的方法来实现你想要的效果，即让所有子div的宽度以及它们之间的间距总和等于#header的宽度。这将取决于每个子元素的宽度是如何改变的（是什么导致宽度不同），以及#header或#wrapper是否具有固定的宽度。我不确定是否可以仅使用CSS来实现这一点。也许有一种方法，我不知道，如果有的话，我也很感兴趣听听关于它的信息。 - Zhihao
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接