CSS两个div彼此相邻

Question

CSS两个div彼此相邻我想把两个人放在<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所建议的那样，包装问题当然可以通过保证金来解决。