-2

我是网页设计的新手，我正在为我的朋友制作一个网站作为项目。我在每个 div 中有两个具有不同内容的 div，一个用于主要内容，一个用于新闻和其他我想要的东西。

我已经对内容 div 进行了分类，这很好，它在我想要的地方。但是，当我向右浮动新闻 div 时，它会从内容 div 下方（仍在包装器 div 内部）到包装器 div 外部，但到达我想要的位置。（我知道这一点，因为现在我有一个蓝色边框，所以我可以确保所有东西都在我想要的位置。）

这是我的代码和CSS：

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style/style.css" type="text/css">
<title>Bake Away</title>
</head>
<body>
<img src="img/logo.png">
<img src="img/ad_bar.png">
<div id="wrapper">
<div id="navBar">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Responsibility</a></li>
<li><a href="#">Working With Us</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
<div id="images">
<img src="img/scroll_1.png">
</div>
<div id="content">
<span>Welcome to the Bake Away Bakery, here you can find out about
all the wonderful things we bake. How you can place orders, who we
bake for, where we're based, apply for jobs and contact head office.</span>
</div>
<div id="news">
<h3>Latest news:</h3>
<span>We've just started our new line of cakes that should
hit the shelves by Monday.</span>
<span class="read">Read More</span>
</div>
</div>
</body>
</html>
body{
margin:0;
padding:0;
width:100%;
background-color:#E6E6E6;
font-family:consolas;
font-size:16px;
font-weight:normal;
text-align:center;
}
img{
margin-top:5px;
margin-right:15px;
}   
#wrapper{
width:1000px;
border:1px solid blue;
margin:3px;
margin-left:13px;
text-align:left;
}
#navBar{
color:white;
margin:2px;
margin-right:43px;
height:50px;
font-size:25px;
font-weight:bold;
float:center;
text-align:center;
}
#navBar ul{
list-style-type:none;
}
#navBar li{
display:inline;
}
#navBar a{
text-decoration:none;
background-color:#BDBDBD;
color:black;
padding:2px;
}
#navBar a:hover{
text-decoration:underline;
background-color:#FE2E2E;
color:white;
}
#images img{
margin-left:50px;
}
#content{
width:450px;
margin-left:7px;
margin-bottom:3px;
font-size:16px;
}
#news{
width:300px;
}
4

2 回答 2

3

好吧，您可以添加display: inline-block;，简单得要命；）

于 2013-07-31T23:23:30.277 回答
0

添加display: inline-block到以下CSS：

#navBar {
    color:white;
    margin:2px;
    margin-right:43px;
    height:50px;
    font-size:25px;
    font-weight:bold;
    float:center;      // there is nothing like this. Wrong text-align:center;
    display: inline-block;
}
#images img {
    margin-left:50px;
    display: inline-block;
}
#content {
    width:450px;
    margin-left:7px;
    margin-bottom:3px;
    font-size:16px;
    display: inline-block;
}
#news {
    width:300px;
    display: inline-block;
}

检查这个JSFiddle

于 2013-07-31T19:18:00.890 回答