CSS两个div彼此相邻

我不知道这是否仍然是当前的问题,但我刚遇到同样的问题,并使用了CSS display: inline-block;标签.将它们包装在一个div中,以便它们可以正确定位.

    
Content1
    
Content2

请注意,内联样式属性的使用仅用于此示例的简洁性,当然这些用于移动到外部CSS文件.

不幸的是,对于一般情况来说,这不是一件微不足道的事情.最简单的方法是添加一个css样式的属性"float:right;" 然而,对于你的200px div,这也会导致你的"主"-div实际上是全宽度,并且那里的任何文本都会漂浮在200px-div的边缘,这通常看起来很奇怪,具体取决于内容(几乎在所有情况下,除非它是浮动图像).

编辑: 正如Dom所建议的那样,包装问题当然可以通过保证金来解决.傻我.

@roe和@MohitNanda建议的方法有效,但如果右侧div设置为float:right;,则它必须首先出现在HTML源代码中.这会打破从左到右的读取顺序,如果在关闭样式的情况下显示页面,则可能会造成混淆.如果是这种情况,使用包装器div和绝对定位可能会更好:

    
left
    
right

证明:

编辑:嗯,有趣.预览窗口显示正确格式化的div,但渲染的帖子项不显示.对不起,你必须亲自试试.

我今天遇到了这个问题.基于上述解决方案,这对我有用:

 
    
Content left div
 
    
Content right div
 
 

只需使父div跨越整个宽度并浮动其中包含的div.

UPDATE

如果需要将元素放在一行中,则可以使用Flex Layout.这里有另一个Flex教程.这是一个很棒的CSS工具,即使它不是100%兼容,每天它的支持也会越来越好.这很简单:

HTML

CSS

.container {
    display: flex;
    width: 100%;
    height: 200px;
}

.contentA {
    flex: 1;
}

.contentB {
    flex: 3;
}

你得到的是一个总容量为4个单位的容器,它与子女共享空间的关系为1/4和3/4.

我在CodePen中做了一个例子来解决你的问题.我希望它有所帮助.

http://codepen.io/timbergus/pen/aOoQLR?editors=110

很古老

也许这只是一个废话,但你试过一张桌子吗？它不直接使用CSS来定位div,但它工作正常.

您可以创建一个1x2表并将其放入divs内部,然后使用CSS格式化表以根据需要放置它们:

注意

如果你想避免使用表,如前所述,你可以使用float: left;和float: right;在以下元素中,不要忘记添加一个clear: left;,clear: right;或者clear: both;为了清理位置.

div1 {
    float: right;
} 
div2 {
    float: left;
}

只要您clear: both为分隔这两个列块的元素设置,这将正常工作.