Question

我在浮动某些元素时遇到了一些麻烦。我复制了一个例子here。

基本上我希望Logout出现在右边（就像左边的图像一样），但我很难这样做。

如果您将float: right与float: left交换，反之亦然.logo和user-header，Logout仍会显示在新行上，同时徽标将正确显示向右浮动。

我觉得我错过了一些明显的东西。

有什么想法吗？

感谢。

Answer 1

http://jsfiddle.net/xVXPk/15/

试试这个。（总是浮动：右，浮动：左，中，清：两者） - 注意关闭图像标记。

<div id="header">
        <div class="user-header">
             <label class="user"></label>
              <a class="" href="#">Logout</a>
        </div>
        <div class="logo">
             <a href="index.php"><img src="#"/></a>
        </div>
        <div class="company-header">
            <a title="title" href="index.php"><b>Hello</b></a>
        </div>
        <div style="clear:both; height:1px; width:99%" ></div>
    </div>

#header {
    width: 600px;
    background-color: #585D63;
    padding: 15px 0px;
}

#header .logo {
    float: left;
    margin-left: 30px;
}

#header .logo img {
    height: auto;
}

#header .company-header {
    font-size: 150%;
    letter-spacing: 1px;
    text-align: center;
    width: 200px; 
    margin: 0 auto;
}

#header .user-header {
    float: right;
    margin-right: 30px;
}

#header .user-header a {
    max-width: 120px;
    height: auto;
}

这篇文章的重复：

How to align 3 divs (left/center/right) inside another div?

为了解释，据我所知，当浏览器绘制页面时，它将呈现中心内容，首先是按逻辑顺序处理页面。然后应用浮动这就是右边挂起的原因。但是通过首先添加浮点数，浏览器将在渲染中心之前将内容浮动到右边，因为它在第一种情况下向左中心，在第二个右上角中央。如果这是有道理的。处理操作的顺序排序。

Answer 2

你根本没有做正确的数学运算。 div class="user-header"没有足够的空间放置在RH侧。请参阅JSFiddle with borders。

编辑：你需要浮动：离开div class="company-header"：live demo。

使用过的代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Live demo</title>
<style>
div {
    border: 1px solid black;    /* added */
}
#header {
    width: 600px;
    height: 60px;               /* added */
    background-color: #585D63;
    padding: 15px 0px;
}
#header .logo {
    float: left;
    width: 33%;
    max-width: 180px;
    padding: 5px 30px;
}
#header .logo img {
    max-width: 120px;
    height: auto;
}
#header .company-header {
    font-size: 150%;
    letter-spacing: 1px;
    margin: 0 auto;
    width: 33%;
    text-align: center;
    float: left;                /* added */
}
#header .user-header {
    float: right;
    w/idth: 33%;                /* de-activated */
    max-width: 180px;
    padding: 5px 30px;
}
#header .user-header a {
    max-width: 120px;
    height: auto;
}
  </style>
</head>
<body>
    <div id="header">
        <div class="logo">
            <a href="index.php"><img src="#"></a>
        </div>
        <div class="company-header">
            <a title="title" href="index.php">
                <b>Hello</b>
            </a>
        </div>
        <div class="user-header">
            <label class="user"></label>
            <a class="" href="#">Logout</a>
        </div>
    </div>
</body>
</html>

Answer 3

将类添加到锚：<a class="logout" href="#">Logout</a>

的CSS：

#header {
    position: relative;
}

.logout {
    line-height: 58px;  /* Same height as #header */
    position: absolute;
    top: 0;
    right: 30px;  /* Same padding-left of logo */
}

DEMO

CSS浮动的问题

3 个答案: