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 和宽度属性来解决它。

#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

<强>更新

如果您需要将元素放在一行中，则可以使用Flex Layout。在这里你有另一个Flex tutorial。这是一个很棒的CSS工具，即使它不是100％兼容，每天support都会越来越好。这很简单：

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;，{ {1}}或clear: right;以便清理职位。

Answer 7

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

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

Answer 8

我遇到了同样的问题并且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;
}

诀窍是在主盒子上使用右边的填充物，但是再次使用右边的边框再次使用该边距。

Answer 9

正如大家所指出的那样，你可以通过在RHS内容上设置float:right;并在LHS上设置负余量来实现这一目标。

但是..如果你没有在LHS上使用float: left;（就像Mohit那样），那么你将获得踩踏效果，因为LHS div仍将消耗布局中的边距空间

但是...... LHS float会收缩包装内容，因此如果不可接受，你需要插入一个定义的宽度子节点，此时你也可以在父节点上定义宽度。

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

然而..这个问题可以是solved浮点数给出一些额外的标记

（警告：我不同意该示例中的.clearing div，有关详细信息，请参阅here）

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

Answer 10

这不是每个人的答案，因为它在IE7中不受支持，但您可以使用它然后使用IE7的备用答案。它是display：table，display：table-row和display：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;
 }

Answer 11

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

https://jsfiddle.net/9934sc4d/4/ - 加上你不需要清理你的漂浮物！

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

Answer 12

用我的一个类似的网站来解释：

<!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>

Answer 13

只需使用z-index就可以了。确保标记为固定或绝对的位置。然后没有什么会像浮动标签一样四处移动。

CSS两个div彼此相邻

13 个答案: