多个div对齐问题

Question

我正在尝试在页面http://jsfiddle.net/bss6mc5a/

上创建多个水平div元素

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

布局是我希望它显示的方式然而当我添加文本（删除评论标签）时div正在向下移动，当我希望它保持原位时。

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

Answer 1

您需要为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);}

更新小提琴：

http://jsfiddle.net/bss6mc5a/3/

更新2：

http://jsfiddle.net/bss6mc5a/7/

Answer 2

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

我更新了your JSFiddle以做我认为有帮助的事情。

基本上，你的左右内容区域通常具有固定的宽度（虽然你的图像弥补了这一点），并且绝对定位将它们放在正确的位置，然后内容只是以：

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

但请查看小提琴，看看是否有帮助。

Answer 3

检查这个我想要点击Demo

CSS的一些变化

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

希望这会对你有帮助......

Answer 4

给你的身体div显示：inline-block;

http://jsfiddle.net/bss6mc5a/5/

#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;}