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

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

css html

Css 在不同的div中并排对齐文本,css,html,alignment,Css,Html,Alignment,我是网页设计新手，我正在为我的朋友制作一个网站。我有两个分区，每个分区都有不同的内容，一个是主要内容，一个是新闻和其他我想放在旁边的东西我已经把内容分类了，这很好，我想放在哪里就放在哪里。但是，当我将news div向右浮动时，它从content div下面（仍然在wrapper div内部）移动到wrapper div的外侧，但移动到我想要的位置。（我知道这一点，因为现在我有一个蓝色边框，所以我可以确保所有东西都在我想要的地方。）这是我的代码和css： <!DOCTYPE html&

我是网页设计新手，我正在为我的朋友制作一个网站。我有两个分区，每个分区都有不同的内容，一个是主要内容，一个是新闻和其他我想放在旁边的东西

我已经把内容分类了，这很好，我想放在哪里就放在哪里。但是，当我将news div向右浮动时，它从content div下面（仍然在wrapper div内部）移动到wrapper 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;
}


烘烤








欢迎来到烘焙面包店，在这里你可以找到
我们烤的所有好吃的东西。你怎么下订单，我们是谁
bake for，我们的总部，申请工作并联系总部。
最新消息:
我们刚刚开始新的蛋糕系列，应该
星期一前上架。
阅读更多
身体{
保证金：0；
填充：0；
宽度：100%；
背景色：#e6；
字体系列：consolas；
字体大小：16px；
字体大小：正常；
文本对齐：居中；
}
img{
边缘顶部：5px；
右边距：15px；
}   
#包装纸{
宽度：1000px；
边框：1px纯蓝色；
保证金：3倍；
左边距：13px；
文本对齐：左对齐；
}
#导航栏{
颜色：白色；
保证金：2倍；
右边距：43像素；
高度：50px；
字体大小：25px；
字体大小：粗体；
浮动：中心；
文本对齐：居中；
}
#纳瓦尔{
列表样式类型：无；
}
#李国宝{
显示：内联；
}
#导航栏a{
文字装饰：无；
背景色：#bdbd；
颜色：黑色；
填充：2px；
}
#导航栏a：悬停{
文字装饰：下划线；
背景色：#Fe2e；
颜色：白色；
}
#图像img{
左边距：50像素；
}
#内容{
宽度：450px；
左边距：7px；
利润底部：3倍；
字体大小：16px；
}
#新闻{
宽度：300px；
}

将

显示：内联块添加到以下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;
}

选中此项
好的，您可以添加显示：内联块，非常简单；）
 显示：内联块；这将是你最好的选择，我会说让他们排在一起。否则您需要使用浮动：左；要将它们全部内联。您的问题中没有CSS，请添加CSS或创建一个提琴。这仍然不能将其保留在蓝线内。@user2639366这是关于前两个图像的吗？