CSS两个div彼此相邻

我要两个<div>紧挨着。右边<div>大约200px；并且左侧<div>必须填满屏幕的其余宽度？我怎样才能做到这一点？

您可以使用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>

我不知道这是否仍然是当前问题，但我遇到了同样的问题并使用了CSS display: inline-block;标签。将它们包装在div中，以便可以适当地放置它们。

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

请注意，使用内联样式属性仅是为了简洁起见，当然，这些示例已被移动到外部CSS文件中。

不幸的是，对于一般情况而言，这并不是一件容易的事。最简单的方法是添加css样式的属性“ float：right;”。到您的200像素div，但是，这也会导致您的“主” div实际为全角，并且其中的任何文本都将漂浮在200像素div的边缘，这通常看起来很奇怪，具体取决于内容（在所有情况下，除非是浮动图片）。

编辑： 正如Dom所建议的，包装问题当然可以有一点解决。傻我

@roe和@MohitNanda建议的方法有效，但是如果将正确的div设置为float:right;，则它必须在HTML源代码中排在第一位。这会破坏从左到右的读取顺序，如果在关闭样式的情况下显示页面，可能会造成混乱。如果是这种情况，最好使用wrapper 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，但呈现的帖子项目不显示。抱歉，您必须自己尝试一下。

我今天遇到了这个问题。根据上述解决方案，这对我有用：

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

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

更新

如果需要将元素连续放置，可以使用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;为了清理位置。

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

只要您clear: both为分隔这两个列块的元素设置，就可以正常工作。

我遇到了同样的问题，Mohits版本有效。如果要在html中保持左右顺序，请尝试此操作。就我而言，左div正在调整尺寸，右div保持在260px的宽度。

的HTML

<div class="box">
<div class="left">Hello</div>
<div class="right">World</div>
</div>

的CSS

.box {
    height: 200px;
    padding-right: 260px;
}    

.box .left {
    float: left;
    height: 200px;
    width: 100%;
}

.box .right {
    height: 200px;
    width: 260px;
    margin-right: -260px;
}

诀窍是在主框上使用右填充，但通过在右边框处再次使用margin-right来再次使用该空间。

我混合使用float和overflow-x：hidden。最少的代码，始终有效。

https://jsfiddle.net/9934sc4d/4/-另外，您无需清除浮动信息！

.left-half{
    width:200px;
    float:left;
}
.right-half{
    overflow-x:hidden;
}

正如所有人都指出的那样，您可以通过float:right;在RHS内容上设置a 和在LHS上设置负余量来做到这一点。

但是..如果您不在float: left;LHS上使用a （如Mohit那样），则将获得步进效果，因为LHS div仍将占用布局中的空白空间。

但是，。LHS浮点数将收缩包装内容，因此，如果不可接受，则需要插入一个定义宽度的子节点，此时，您可能已经在父节点上定义了宽度。

但是，正如David指出的那样，您可以更改标记的读取顺序，以避免LHS浮动要求，但这存在可读性和可能的​​可访问性问题。

但是..这个问题可以通过给定一些额外标记的浮点数来解决

（注意：在该示例中，我不赞成.clearing div，有关详细信息，请参见此处）

考虑到所有问题，我想我们大多数人都希望有一个非贪婪的宽度：留在CSS3中...

这并不是每个人的答案，因为IE7-不支持它，但是您可以使用它，然后对IE7-使用替代答案。显示为：table，显示为：table-row，显示为：table-cell。请注意，这不是使用表格进行布局，而是为div设置样式，以使事情顺利进行，从而消除了上面的所有麻烦。我的是html5应用程序，因此效果很好。

本文显示了一个示例：http : //www.sitepoint.com/table-based-layout-is-the-next-big-thing/

样式表如下所示：

 .container {
    display: table;
    width:100%;
 }

 .left-column {
    display: table-cell;
 }

 .right-column {
    display: table-cell;
    width: 200px;
 }

解释一下我的一个网站，它做了类似的事情：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <style TYPE="text/css"><!--

.section {
    _float: right; 
    margin-right: 210px;
    _margin-right: 10px;
    _width: expression( (document.body.clientWidth - 250) + "px");
}

.navbar {
    margin: 10px 0;
    float: right;
    width: 200px;
    padding: 9pt 0;
}

  --></style>
 </head>
 <body>
  <div class="navbar">
  This will take up the right hand side
  </div>
  <div class="section">
  This will fill go to the left of the "navbar" div
  </div>
 </body>
</html>

只需使用z-index，一切都会很好。确保将位置标记为固定或绝对。那么什么都不会像float标签那样四处移动。