CSS两个div彼此相邻 [英] CSS two divs next to each other

问题描述

我想把两个< 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>

这篇关于CSS两个div彼此相邻的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！