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&nbsp;display: inline-block;标签。将它们包装在一个div中，以便它们可以正确定位。<div> &nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;style="display:&nbsp;inline-block;">Content1</div> &nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;style="display:&nbsp;inline-block;">Content2</div></div>请注意，使用内联样式属性仅用于此示例的简洁性，当然这些用于移动到外部CSS文件。

Answer 3

不幸的是，对于一般情况来说，这不是一件微不足道的事情。最简单的方法是添加一个css样式的属性“float：right;” 然而，对于你的200px div，这也会导致你的“主”-div实际上是全宽度，并且那里的任何文本都会漂浮在200px-div的边缘，这通常看起来很奇怪，具体取决于内容（几乎在所有情况下，除非它是浮动图像）。编辑： 正如Dom所建议的那样，包装问题当然可以通过保证金来解决。