两个div在一起

I want to put two <div>s next to each other. The right <div> is about 200px; and the left <div> must fill up the rest of the screen width? How can I do this?

我想把两个

s放在一起。右

约200px;而左

必须填充屏幕的其余宽度?我该怎么做呢?

13 个解决方案

#1

You can use flexbox to lay out your items:

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

This is basically just scraping the surface of flexbox. Flexbox can do pretty amazing things.

这基本上只是皮毛而已。Flexbox可以做非常神奇的事情。

---

For older browser support, you can use CSS float and a width properties to solve it.

对于旧的浏览器支持，您可以使用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>

#2

I don't know if this is still a current issue or not but I just encountered the same problem and used the CSS display: inline-block; tag. Wrapping these in a div so that they can be positioned appropriately.

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

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

Note that the use of the inline style attribute was only used for the succinctness of this example of course these used be moved to an external CSS file.

注意，使用内联样式属性只用于这个示例的简洁性，当然，这些属性被移动到一个外部CSS文件中。

#3

Unfortunately, this is not a trivial thing to solve for the general case. The easiest thing would be to add a css-style property "float: right;" to your 200px div, however, this would also cause your "main"-div to actually be full width and any text in there would float around the edge of the 200px-div, which often looks weird, depending on the content (pretty much in all cases except if it's a floating image).

不幸的是，对于一般情况来说，这并不是一件小事。最简单的事情就是添加一个css样式属性“浮动:对,“200 px div,然而,这也将使你的“主要”div实际上充满宽度和任何文本会四处漂浮的边缘200 px-div,通常看起来奇怪,根据内容(几乎在所有情况下如果是浮动图像除外)。

EDIT: As suggested by Dom, the wrapping problem could of course be solved with a margin. Silly me.

编辑:正如Dom所建议的，包装问题当然可以用边距来解决。愚蠢的我。

#4

The method suggested by @roe and @MohitNanda work, but if the right div is set as float:right;, then it must come first in the HTML source. This breaks the left-to-right read order, which could be confusing if the page is displayed with styles turned off. If that's the case, it might be better to use a wrapper div and absolute positioning:

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

Demonstrated:

证明:

left right

Edit: Hmm, interesting. The preview window shows the correctly formatted divs, but the rendered post item does not. Sorry then, you'll have to try it for yourself.

编辑:嗯,有趣。预览窗口显示了正确格式的div，但是呈现的post项没有显示。对不起，你得自己试一试。

#5

I ran into this problem today. Based on the solutions above, this worked for me:

我今天遇到了这个问题。基于以上的解决方案，我认为:

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

Simply make the parent div span the full width and float the divs contained within.

只需将父div跨度设为全宽度，并将包含在其中的div浮动。

#6

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

This will work OK as long as you set clear: both for the element that separates this two column block.

只要您设置clear:两个元素都用于分隔这两个列块的元素，这就可以工作。

#7

UPDATE

更新

If you need to place elements in a row, you can use Flex Layout. Here you have another Flex tutorial. It's a great CSS tool and even though it is not 100% compatible, each day its support is getting better. This works as simple as:

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

HTML

HTML

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

CSS

CSS

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

.contentA {
    flex: 1;
}

.contentB {
    flex: 3;
}

And what you get here is a container with a total size of 4 units, that share the space with its children in a relation of 1/4 and 3/4.

你得到的是一个总容量为4个单位的容器，它和它的子容器在1/4和3/4的关系*享空间。

I have done an example in CodePen that solves your problem. I hope it helps.

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

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

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

VERY OLD

非常古老的

Maybe this is just a nonsense, but have you tried with a table? It not use directly CSS for positioning the divs, but it works fine.

也许这只是个胡言乱语，但你试过桌子吗?它不直接使用CSS来定位div，但是它工作得很好。

You can create a 1x2 table and put your divs inside, and then formatting the table with CSS to put them as you want:

您可以创建一个1x2表并将div放入其中，然后使用CSS对表进行格式化，以便按照您的要求放置它们:

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

Note

请注意

If you want to avoid using the table, as said before, you can use float: left; and float: right;and in the following element, don't forget to add a clear: left;, clear: right; or clear: both; in order to have the position cleaned.

如果您想避免使用表，如前所述，您可以使用float: left;并且在下面的元素中，不要忘记添加一个clear: left;， clear: right;或明确:;为了清理这个位置。

#8

I ran into the same problem and Mohits version works. If you want to keep your left-right order in the html, just try this. In my case, the left div is adjusting the size, the right div stays at width 260px.

我遇到了同样的问题，Mohits版本可以工作。如果你想在html中保持左右的顺序，就试试这个。在我的例子中，左边的div调整了大小，右边的div保持在260px的宽度。

HTML

HTML

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

CSS

CSS

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

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

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

The trick is to use a right padding on the main box but use that space again by placing the right box again with margin-right.

诀窍是在主框上使用右填充，但再次使用空格，方法是再次将右框与右边框放在一起。

#9

As everyone has pointed out, you'll do this by setting a float:right; on the RHS content and a negative margin on the LHS.

正如大家指出的，你可以通过设置一个浮点数来实现;在RHS含量和LHS的负边缘上。

However.. if you don't use a float: left; on the LHS (as Mohit does) then you'll get a stepping effect because the LHS div is still going to consume the margin'd space in layout.

然而. .如果不使用浮点数:左;在LHS(就像Mohit做的那样)上，您将得到一个步进效果，因为LHS div仍然会在布局中使用空白空间。

However.. the LHS float will shrink-wrap the content, so you'll need to insert a defined width childnode if that's not acceptable, at which point you may as well have defined the width on the parent.

然而. .LHS浮动将收缩内容，因此如果不能接受，您将需要插入一个定义了宽度的子节点，那么您也可以在父节点上定义宽度。

However.. as David points out you can change the read-order of the markup to avoid the LHS float requirement, but that's has readability and possibly accessibility issues.

然而. .正如David所指出的，您可以更改标记的读取顺序，以避免LHS浮动要求，但这存在可读性和可访问性问题。

However.. this problem can be solved with floats given some additional markup

然而. .这个问题可以通过给定一些附加标记的浮点数来解决

(caveat: I don't approve of the .clearing div at that example, see here for details)

(注意:在这个例子中，我不赞成。clear div，详情请看这里)

All things considered, I think most of us wish there was a non-greedy width:remaining in CSS3...

考虑到所有的因素，我认为我们大多数人都希望有一个不贪婪的宽度:留在CSS3……

#10

This won't be the answer for everyone, since it is not supported in IE7-, but you could use it and then use an alternate answer for IE7-. It is display: table, display: table-row and display: table-cell. Note that this is not using tables for layout, but styling divs so that things line up nicely with out all the hassle from above. Mine is an html5 app, so it works great.

这不是每个人的答案，因为它不支持IE7-，但是你可以使用它，然后用一个替代的答案来回答IE7-。它是display: table, display: table-row, display: table-cell。注意，这并不是使用表格进行布局，而是使用样式div，这样事情就可以很好地从上面的麻烦中解脱出来。我的是一个html5应用程序，所以效果很好。

This article shows an example: http://www.sitepoint.com/table-based-layout-is-the-next-big-thing/

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

Here is what your stylesheet will look like:

下面是样式表:

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

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

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

#11

I use a mixture of float and overflow-x:hidden. Minimal code, always works.

我使用浮动和溢出的混合物-x:隐藏。最少的代码,总是工作。

https://jsfiddle.net/9934sc4d/4/ - PLUS you don't need to clear your float!

https://jsfiddle.net/9934sc4d/4/ -你不需要清除浮动!

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

#12

To paraphrase one of my websites that does something similar:

我的一个网站做了类似的事情:

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

#13

just use a z-index and everything will sit nice. make sure to have positions marked as fixed or absolute. then nothing will move around like with a float tag.

只要使用z指数，一切都会很好。确保有固定或绝对的位置。那么没有什么会像浮动标签那样移动。