主页 / 问题 / 687929
Accepted
Yuri
Asked:2020-07-06 17:03:34 +0000 UTC2020-07-06 17:03:34 +0000 UTC

将 div 拉伸到完全自由（最大）宽度

  • 772

有两个街区。第一个块具有动态宽度，即 宽度取决于内容。第二个块应拉伸到（自由）宽度的其余部分。

.parent {
  border: 2px solid red;
  height: 30px;
  line-height: 26px;
}
.child {
  display: inline-block;
  border: 2px solid blue;
}
<div class="parent">
  <div class="child">Содержимое</div>
  <div class="child max">Второе содержимое</div>
</div>

如何使用 CSS 将第二个块拉伸到整个自由宽度？

html

1 个回答

  1. Best Answer

    我知道如何将第二个块拉伸到整个自由（最大）宽度的两种好方法：

    1. 现代方法是使用 flexbox。

      .parent {
  display: flex;
  border: 2px solid red;
  height: 30px;
  line-height: 26px;
}
.child {
  display: block;
  border: 2px solid blue;
}
/* Растягиваем второй блок на максимальнуцю ширину */
.child.max {
  flex: 1;
}
      <div class="parent">
  <div class="child">Содержимое</div>
  <div class="child max">Второе содержимое</div>
</div>

    2. 一种不寻常的技术是使用浮动和溢出。Overflow 为所选元素创建一个单独的格式化上下文，从而在应用它的元素内本地化 float 属性的效果。更多的...

      .parent {
  border: 2px solid red;
  line-height: 26px;
  overflow: auto; /* Это чтобы родитель не терял высоту */
}
.child {
  display: block;
  float: left;
  border: 2px solid blue;
}
/* Растягиваем второй блок на максимальнуцю ширину */
.child.max {
  float: none;
  overflow: auto;
}
      <div class="parent">
  <div class="child">Содержимое</div>
  <div class="child max">Второе содержимое</div>
</div>

    澄清：溢出必须是父级中的唯一一个，并且毕竟是浮动的。

    • 8

相关问题