您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

CSS两个div彼此相邻

CSS两个div彼此相邻

您可以使用 布置物品:@H_403_1@

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

这基本上只是刮擦flex@R_241_2419@的表面。Flex@R_241_2419@可以做很多令人惊奇的事情。@H_403_1@

对于较旧的浏览器支持,可以使用CSS 和 属性解决它。@H_403_1@

#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 2022/1/1 18:21:41 有420人围观

撰写回答


你尚未登录,登录后可以

和开发者交流问题的细节

关注并接收问题和回答的更新提醒

参与内容的编辑和改进,让解决方法与时俱进

请先登录

推荐问题


联系我
置顶