CSS两个div彼此相邻

本文介绍了CSS两个div彼此相邻的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我想把两个< div> 放在一起。正确的< div> 约为200像素;左侧< div> 必须填满屏幕宽度的其余部分吗？

解决方案

您可以使用 flexbox 以展示您的项目：

#parent {display：flex;}＃narrow {width：200px;背景：lightblue; / *只是这样可见* /}＃wide {flex：1; / *生长到容器的休息* / background：lightgreen; / *只是这样可见* /}

< div id =parent> < div id =wide> Wide（其余宽度）< / div> < div id =narrow> Narrow（200px）< / div>< / div>

这基本上只是削减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（其余宽度）< / div> < div id =narrow> Narrow（200px）< / div>< / 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?

解决方案

You can use flexbox to lay out your items:

#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.

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

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