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

【问题标题】：Aligning text side by side in different divs在不同的div中并排对齐文本
【发布时间】：2013-08-01 07:23:30
【问题描述】：

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

【问题讨论】：

显示：内联块；将是您最好的选择，我会说将它们排列在一起。否则你需要使用 float:left;让它们全部内联。
您的问题中没有 CSS，请添加 CSS 或创建小提琴。

标签： css html alignment

【解决方案1】：

好吧，你可以加display: inline-block;，简直太简单了；）

【讨论】：

【解决方案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

【讨论】：

那仍然没有保持在蓝线内。
@user2639366 是前 2 张图片吗？