浮动的CSS问题
回答
试试这个。 (总是做float:right,float:left,center,clear:both) - 注意关闭你的图片标签。这个帖子的
<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?
为了解释,据我了解的问题,当浏览器绘制的页面,它会呈现中心内容,首先因为它的过程该页面按照逻辑顺序。然后应用浮动这就是为什么右侧挂起。但是通过首先添加浮点数,在渲染中心将内容向右浮动之前,浏览器会知道浮点数,因为它会在第一种情况下左中右,在第二个右上角中心。如果这是有道理的。处理操作的顺序。
你根本没有做数学的权利。 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>
尝试用较低的宽度?你能证明它的工作原理吗? – ArtisticPhoenix
不,但您可以自由编辑小提琴。 –
我做了,但它仍然不起作用http://jsfiddle.net/xVXPk/16/,但我的。 – ArtisticPhoenix
添加类锚:<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 */
}
负边距,有点破解 - 不是漂浮物品的正确方式,我们可能只是绝对的位置。 – ArtisticPhoenix
@ArtisiticPhoenix它虽然工作! – Matthew
@ArtisiticPhoenix我绝对定位它与行高。 – Matthew
- 1. CSS浮动问题
- 2. Css浮动问题
- 3. CSS和浮动的问题
- 4. Css浮动权问题
- 5. CSS浮动框问题
- 6. CSS浮动身高问题
- 7. CSS浮动重叠问题
- 8. CSS clearfix问题浮动
- 9. IE6 CSS浮动问题
- 10. CSS:小问题浮动
- 11. CSS - 意外浮动问题
- 12. css 3浮动问题
- 13. CSS浮动位置问题
- 14. CSS浮动iPad问题?
- 15. Firefox CSS浮动问题
- 16. CSS按钮浮动问题
- 17. CSS浮动和HTML问题
- 18. CSS自动宽度浮动问题
- 19. WordPress的CSS img浮动左问题
- 20. HTML/CSS - Internet Explorer的浮动问题
- 21. 浮动css元素的问题
- 22. ListView ItemTemplate中的CSS(浮动)问题!
- 23. 在CSS中浮动div的问题
- 24. 简单的CSS浮动问题
- 25. 令人沮丧的CSS浮动问题
- 26. 浮动内容的css问题
- 27. 奇怪的CSS浮动问题
- 28. 容器div中的CSS浮动问题
- 29. CSS:小浮问题
- 30. 浮点问题 - Css
感谢,简单地重新排列顺序(左,右,中)的HTML divs做了诡计!哎呀,我没有做足够的研究,我猜想类似的问题!非常感谢。 –
当然,如果我回想一些老版本的IE更喜欢这个顺序,但我不应该太过分了〜只是想我会提到为什么我先做了正确的一个,只是习惯 – ArtisticPhoenix