html - 2个并排的div。一个适合内容,另一个扩展全宽

标签 html css

<分区>

我想水平放置两个div

parent div width=500px
- left div: shall grow horizontally to fit to contents (not more or less)
- right div: shall grow horizontally and take up all the space to the right edge

我怎样才能做到这一点?

最佳答案

使用 flexflex-grow

div {
display: flex;
width: 500px;
}
.grow {
flex-grow: 1;
background: #eee;
}
<div>
  <span>content</span>
  <span class="grow">grow</span>
</div>

关于html - 2个并排的div。一个适合内容,另一个扩展全宽,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44608776/

上一篇:javascript - Bootstrap 导航下拉菜单不起作用,我做错了什么?

下一篇:javascript - 我无法弄清楚为什么弹出窗口会在出现错误或发送时消失并重新出现

相关文章:

php - 如何删除影响 WordPress 样式的页眉和页脚

javascript - Twitter Bootstrap 如何将下拉选择替换为菜单按钮

html - 我似乎无法删除顶部填充或边距,CSS

javascript - 为什么 js 不能在 cordova 中工作?

html - 内联 block 与边距 : 0 auto

html - grid中的图片超出了<div>的原始空间

html - 文本未与顶部对齐

javascript - 在不影响占位符的情况下增加密码输入字符大小

html - 我怎样才能用CSS制作这样的div形状?

php - HTML 文本字段中的文本编码