Html 多个div对齐问题

我试图在一个页面上创建多个水平div元素

布局是我希望它显示的方式，但是当我添加文本时，将注释标记移除到视图中，当我希望它保持不变时，div向下移动

---

感谢您对我如何实现这一目标的帮助/纠正。

您需要定义div的宽度：

#body-left { float: left; content:url(http://placehold.it/240x930);}
#body { float: left; width: 960px; }
#body-right { float: right; content:url(http://placehold.it/240x930);}

更新小提琴：

更新2：

---

您可以只设置固定位置对象，而不是尝试将元素向左或向右浮动

我更新了做我认为会有帮助的事情

基本上，您的左右内容区域通常具有固定的宽度，尽管您的图像弥补了这一点，并将其绝对放置在正确的位置，然后内容仅以以下内容为中心：

margin-left: auto;
margin-right: auto;
width: 300px; /* some arbitary width */

---

但是看看小提琴，看看是否有用。

看看这个，我想做什么就做什么，点击

CSS中的一些变化

#body {
display: inline;
width: 960px;
float: left;
text-align: justify;
}

---

希望这能帮助你…

给你的身体div一个显示：inline block

---

只是为了澄清-body div正在向下移动body right div，我希望body right div在向body添加内容时不要移动。已经有2个答案，但要了解更多信息，请查看此处：感谢您迄今为止的帮助，再加上这个-我需要中间的div是960px，两边的body left和body right表示相同的大小和大小centered@user3094178当前位置我又更新了小提琴。。检查一下。。

#body {
display: inline;
width: 960px;
float: left;
text-align: justify;
}

#body-left {content:url(http://placehold.it/240x930);display: inline-block; vertical-align: top;} #body { display: inline-block; vertical-align: top; width: 30%;} #body-right {content:url(http://placehold.it/240x930); display: inline-block; vertical-align: top;}