CSS两个div彼此相邻

Question

我想把两个人放在<div>一起.右边<div>约200px; 并且左侧<div>必须填满屏幕宽度的其余部分？我怎样才能做到这一点？

Answer 1

您可以使用flexbox布置项目:

#parent {
  display: flex;
}
#narrow {
  width: 200px;
  background: lightblue;
  /* Just so it's visible */
}
#wide {
  flex: 1;
  /* Grow to rest of container */
  background: lightgreen;
  /* Just so it's visible */
}

<div id="parent">
  <div id="wide">Wide (rest of width)</div>
  <div id="narrow">Narrow (200px)</div>
</div>

这基本上只是刮擦flexbox的表面.Flexbox可以做很棒的事情.

对于较旧的浏览器支持,您可以使用CSS float和width属性来解决它.

#narrow {
  float: right;
  width: 200px;
  background: lightblue;
}
#wide {
  float: left;
  width: calc(100% - 200px);
  background: lightgreen;
}

<div id="parent">
  <div id="wide">Wide (rest of width)</div>
  <div id="narrow">Narrow (200px)</div>
</div>

Answer 2

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

<div>
    <div style="display: inline-block;">Content1</div>
    <div style="display: inline-block;">Content2</div>
</div>

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

Answer 3

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

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

Answer 4

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

<div id="wrap" style="position:relative;">
    <div id="left" style="margin-right:201px;border:1px solid red;">left</div>
    <div id="right" style="position:absolute;width:200px;right:0;top:0;border:1px solid blue;">right</div>
</div>

证明:

左右

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

Answer 5

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

<div style="width:100%;"> 
    <div style="float:left;">Content left div</div> 
    <div style="float:right;">Content right div</div> 
</div> 

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

Answer 6

UPDATE

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

HTML

<div class="container">
    <div class="contentA"></div>
    <div class="contentB"></div>
</div>

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格式化表以根据需要放置它们:

<table>
  <tr>
    <td>
      <div></div>
    </td>
    <td>
      <div></div>
    </td>
  </tr>
</table>

注意

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

Answer 7

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

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