Html CSS 两个 div 彼此相邻

CSS two divs next to each other

提问by Martijn

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?

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

回答by M.N

You can use flexboxto 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 的表面。Flexbox 可以做非常了不起的事情。

---

---

For older browser support, you can use CSS floatand a widthproperties 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>

回答by russholio

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.

我不知道这是否仍然是当前问题，但我刚刚遇到了同样的问题并使用了 CSSdisplay: 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 文件中。

回答by falstro

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 样式的属性“float: right;” 但是，这也会导致您的“主”-div 实际上是全宽的，并且其中的任何文本都会围绕 200px-div 的边缘浮动，这通常看起来很奇怪，具体取决于内容（几乎在所有情况下，除非它是浮动图像）。

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

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

回答by David Hanak

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:

证明：

左右

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，但呈现的帖子项没有。那么抱歉，您必须自己尝试一下。

回答by Wickyd

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。

回答by Timbergus

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 supportis getting better. This works as simple as:

如果需要将元素排成一行，可以使用Flex Layout。这里有另一个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 divsinside, and then formatting the table with CSS to put them as you want:

您可以创建一个 1x2 表格并将其放入divs内部，然后使用 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;and float: right;，不要忘记添加一个clear: left;,clear: right;或者clear: both;为了清理位置。

回答by ccpizza

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

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

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

回答by andreas

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.

诀窍是在主框上使用正确的填充，但通过再次使用边距右放置正确的框来再次使用该空间。

回答by Tony Ray Tansley

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

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

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;
}

回答by dwaz

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- 的替代答案。它是显示：表格，显示：表格行和显示：表格单元格。请注意，这不是使用表格进行布局，而是对 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-thing/

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;
 }