Home / Questions / 22098
Accepted
devconcept
Asked: 2020-08-31 10:19:40 +0800 CST 2020-08-31 10:19:40 +0800 CST

如何使用 CSS 在元素之间分配页面宽度

  • 772

我有以下问题让我很困惑。我想放置几个元素，一个里面有一系列按钮，另一个占据剩余的可用大小。

这张图片说明了我想要达到的结果

例子

<div class="contenedor">
    <div class="contenido">
        <!-- Debe ocupar el resto del espacio -->
    </div>
    <div class="botones">
        <!-- De acuerdo al texto y los botones puede ser más ancho pero siempre es fijo -->
        <button>Ok</button>
    </div>
</div>

这似乎是一项简单的任务，但事实并非如此。问题的根源在于容器必须有width: 100%;，以便它占据所有可用宽度，并且在按钮或按钮占据它们的大小之后，其余的必须由另一个容器占据。

我已经尝试过使用display和width: 100%

.contenedor {
  width: 100%;
}
.contenido {
  display: inline-block;
  width: 100%;
  background-color: blue;
}
.botones {
  display: inline-block;
  background-color: violet;
}
<div class="contenedor">
  <div class="contenido">
    <input>
  </div>
  <div class="botones">
    <button>Ok</button>
    <button>Cancel</button>
  </div>
</div>

显然它不起作用，因为widthen%是相对于父级并占用了所有空间。

我也试过calc

.contenedor {
  padding: 0;
  margin: 0;
  width: 100%;
}
.contenido {
  padding: 0;
  margin: 0;
  display: inline-block;
  width: calc(100% - 124px);
  background-color: blue;
}
.botones {
  padding: 0;
  margin: 0;
  width: 120px;
  display: inline-block;
  background-color: violet;
}
<div class="contenedor">
  <div class="contenido">
    <input>
  </div>
  <div class="botones">
    <button>Ok</button>
    <button>Cancel</button>
  </div>
</div>

但是该解决方案对我不起作用，因为我必须强制固定大小并且元素可能不适合。

我怎么能实现这样的布局？

我更愿意在不使用任何实验属性的情况下实现这一点flexbox，calc以使其尽可能兼容。

html

1 Answers

  1. Best Answer

    根据我的经验，最接近的事情（没有 flexbox）是让容器及其内容表现得像“表格”，如果你愿意，你也可以给它一定的宽度：

    .contenedor {
  display: table;
  width: 100%;
}
.contenido {
  display: table-cell;
  background-color: blue;
}
.botones {
  display: table-cell;
  background-color: violet;
  white-space: nowrap;
  width: 1px;
}
    <div class="contenedor">
  <div class="contenido">
    <input>
  </div>
  <div class="botones">
    <button>Ok</button>
    <button>Cancel</button>
  </div>
</div>

    • 5