Question

我是网页设计的新手，我正在为我的朋友制作一个网站项目。我在每个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;
}

Answer 1

好吧，你可以添加display: inline-block;，简单就像地狱一样;）

Answer 2

将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

在不同的div中并排对齐文本

2 个答案: