Fatal编程技术网
  • html/
  • Html 浮动的CSS问题

Html 浮动的CSS问题

html css

Html 浮动的CSS问题,html,css,css-float,Html,Css,Css Float,我在浮动某些元素时遇到了一些问题。我复制了一个例子 基本上，我希望Logout显示在右侧（就像图像显示在左侧），但我在这样做时遇到了问题 如果在logo和用户标题中用float:right交换和float:left，反之亦然，注销仍显示在新行上，而徽标将正确地向右浮动 我觉得我错过了一些明显的东西 有什么想法吗 谢谢。 试试这个。（始终执行浮动：右，浮动：左，居中，清除：两者）--注意关闭图像标签 <div id="header"> <div class="us

我在浮动某些元素时遇到了一些问题。我复制了一个例子

基本上，我希望
Logout
显示在右侧（就像图像显示在左侧），但我在这样做时遇到了问题

如果在
logo
和
用户标题
中用
float:right
交换
和
float:left
，反之亦然，
注销
仍显示在新行上，而徽标将正确地向右浮动

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

有什么想法吗

谢谢。

试试这个。（始终执行浮动：右，浮动：左，居中，清除：两者）--注意关闭图像标签


<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;
}




#标题{
宽度：600px；
背景色：#585D63；
填充：15px 0px；
}
#标题。标志{
浮动：左；
左边距：30px；
}
#标题.标志img{
高度：自动；
}
#标题，公司标题{
字体大小：150%；
字母间距：1px；
文本对齐：居中；
宽度：200px；
保证金：0自动；
}
#标题。用户标题{
浮动：对；
右边距：30px；
}
#标题。用户标题a{
最大宽度：120px；
高度：自动；
}


本帖副本：




据我所知，为了解释这个问题，当浏览器绘制页面时，它将首先呈现中心内容，因为它按照逻辑顺序处理页面。然后应用浮动，这就是为什么右侧挂起。但是，通过首先添加浮动，浏览器将在渲染中心之前知道将内容向右浮动，因为在第一种情况下是左中右，在第二种情况下是左中左。如果这有道理的话。处理操作的顺序。
你只是没有做正确的计算。空间不足，无法将
div class=“user header”
放置在右侧。看

编辑：并且您需要浮动：同时将
div class=“company header”
也放在左侧：

使用的代码：


<!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>




现场演示
div{
边框：1px纯黑；/*已添加*/
}
#标题{
宽度：600px；
高度：60px；/*已添加*/
背景色：#585D63；
填充：15px 0px；
}
#标题。标志{
浮动：左；
宽度：33%；
最大宽度：180像素；
填充：5px30px；
}
#标题.标志img{
最大宽度：120px；
高度：自动；
}
#标题，公司标题{
字体大小：150%；
字母间距：1px；
保证金：0自动；
宽度：33%；
文本对齐：居中；
浮动：左；/*已添加*/
}
#标题。用户标题{
浮动：对；
w/idth:33%；/*停用*/
最大宽度：180像素；
填充：5px30px；
}
#标题。用户标题a{
最大宽度：120px；
高度：自动；
}

将类添加到锚点：

css:


您试过宽度较低的吗？你能让它像那样工作吗？我做了，但它仍然不工作，但我的工作。如果你不介意的话，我会等待Ubobo的评论。更改为较低的宽度对我也不起作用，通过移动HTML div来修复。谢谢你@艺术家霍尼克斯：你是对的。还需要一些别的东西。请参阅编辑。负边距有点麻烦-不是浮动项目的正确方式，我们不妨将其绝对定位。@ArtisticPhoenix I绝对定位它w/line-height。谢谢，只需重新排列HTML div的顺序（左、右、中）就可以了！哎呀，我想我没有对类似的问题做足够的研究！非常感谢。当然，如果我回忆起IE的一些旧版本，我仍然喜欢右、左、中，我更喜欢这种顺序，但这不应该是个大问题~我想我会提到为什么我先做右一个，只是习惯而已

#header {
    position: relative;
}

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