在CSS中定位这些块的问题 [英] Problem positioning these blocks in CSS
本文介绍了在CSS中定位这些块的问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想实现这一点 - >
I am trying to achieve this->
（黑盒是一个注册/登录部分，蓝色是导航栏，红色是一些带有一些
文本
内容的标题区域）我试图得到这个结果css： / p>(Black box is a signup/login section, blue is a nav bar, red is a header area with some
text
content) I am trying to get to that outcome with this css:@import url(//fonts.googleapis.com/css?family=Droid+Sans:regular,bold&subset=latin);
html, body {
margin:0;
padding:0;
background-color:#fff;
font-family: 'Droid Sans', arial, serif;
color: #777;
font-size: 14px;
}
a {
color: #2e4987;
text-decoration: none;
}
img {
border: 0;
width: 250 px;
height: 250px;
margin: auto;
}
#nwtBox {
margin: 0 auto;
width: 960px;
height: 800px;
}
#nwtBox h1 {
color: #333;
font-weight: normal;
margin: 0 0 20px 0;
padding: 0;
}
#nwtBox h1 span {
float: right;
font-size: 14px;
font-weight: normal;
}
#nwtBox h2 {
font-weight: normal;
font-size: 20px;
padding: 0;
margin: 0 0 10px 0;
color: #333;
}
#nwtBox h3 {
padding:0;
margin: 0;
}
#nwtBox h3 img {
vertical-align: middle;
}
#nwtBox #header {
width: 960px;
background-color:#fff;
height: 100px;
border: solid;
border-width:thin;
border-color: red;
}
#nwtBox #header h1 {
text-align: center;
}
#nwtBox #navigation {
width: 960px;
background-color:#fff;
height: 100px;
border: solid;
border-width:thin;
border-color:blue;
}
#nwtBox #navigation ul {
list-style-type: none;
padding: 0;
margin: 0;
}
#nwtBox #navigation ul li {
padding: 0 30px 0 0;
font-weight: bold;
}
#nwtBox #navigation ul li a {
color: #a8a8a8;
text-decoration: none;
}
#nwtBox #navigation ul li a:hover {
color: #2e4987;
}
#nwtBox #navigation .main-nav {
width: 500px;
overflow: auto;
}
#nwtBox #navigation {
float: left;
padding: 35px 0 0 0;
}
#nwtBox #navigation ul {
list-style-type: none;
padding: 0;
margin: 0;
}
#nwtBox #navigation ul li {
float: left;
padding: 0 30px 0 0;
font-weight: bold;
}
#nwtBox #navigation ul li a {
color: #a8a8a8;
text-decoration: none;
}
#nwtBox #navigation ul li a:hover {
color: #2e4987;
}
#nwtBox #navigation .main-nav {
width: 500px;
overflow: auto;
}
#nwtBox #signupLogin {
float:right;
width: 400px;
overflow: none;
padding: 32px 0 0 0;
text-align: right;
color: #999999;
border: solid;
border-width:thin;
border-color:red;
}
和此HTML
<body>
<div id ="nwtBox">
<div id ="signupLogin">
<ul>
<li> <a href =''> Sign Up</a>
</li>
<li> <a href =''> Log In</a>
</li>
</ul>
</div>
<div id = "navigation">
<ul class="main-nav">
<li class="main-nav-selected">
<a href="index.php">HOME</a>
</li>
<li>
<a href="stuff.php">STUFF</a>
</li>
<li>
<a href='stuff.php'>STUFF</a>
</li>
</ul>
</div>
<div id ="header">
<h1> TEXT</h1>
</div>
</body>
而不是所需的结果，我得到：
instead of the desired outcome, I get:
有什么问题？
推荐答案
试试这个：
#nwtBox #navigation {
clear: both;
//remove float: left;
padding: 35px 0 0 0;
}
如果你想保留 float：left 在#navigation中，您可以在HTML代码中添加一个带有样式清单：两者
If you want to keep float: left in #navigation, you can add a div with style clear: both into HTML code.
<div id="signupLogin>
...
</div>
<div style="clear: both"></div>
<div id="navigation">
...
这篇关于在CSS中定位这些块的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
