自动调整元素的宽度

Question

最近，我被分配了使用HTML和构建Web组件的任务 CSS。 此组件是表单的一部分，由以下内容组成：

• 左侧的元素，可以是标签，跨度或类似的
• 右侧的项目，通常是按钮
• 并且在上述元件之间将定位中心元件，其具有自调节到其他元件之间的剩余空间的行为。

我想实现这个目标：

我找不到符合上述所有标准的解决方案，最后我们最终使用flex来组装组件。

我希望仅使用HTML和CSS构建此组件，不使用（这是非常重要的）JavaScript，或任何库或JavaScript框架，或flex（FLEXBOX）。

body, html {
    width: 100%; height: 100%;
}

.container {
    border: 1px solid black;
    width: 100%;
}

.left {
    float: left;
    background-color: red;
}
.middle {
    width: 100%;
    background-color: #2aff00;
}
.middle > * {
    /*¿¿??*/
}
.right {
    float: right;
    background-color: blue;
}

/*clearfix*/
.container:after {
  content: "";
  display: table;
  clear: both;
}

    <div class="container">

        <div class="left">
            <span>left elem.</span>
        </div>
        <div class="right">
            <button>right elem.</button>
        </div>
        <div class="middle">
            <input type="text"/>
        </div>

    </div>

    <div id="description" style="margin-top: 2em">
      
      
      
        <div><span style="background: red">left elem.:</span> A label or span element that is use as a label. <b>Has fixed width</b></div>
        <div><span style="background: #2aff00">middle elem.:</span> An input like text, select, etc. <b>Has a variable width!.</b> It most resize in the remaining space between the left and rigth elements</div>
        <div><span style="background: blue">right elem.:</span> A button or selectable input. <b>Has fixed width</b></div>
    </div>

正确的元素可能存在也可能不存在，这是我的组件的行为，所以我不能总是知道他的宽度。这就是为什么我需要让中间容器变得动态。

并且中间容器中不能使用溢出，因为此功能可以隐藏元素的一部分。

更新

终于解决了：CodePen

Answer 1

在标签和按钮元素上使用浮动，左右浮动它们。这将使它们脱离正常流动并将它们推到容器的左右两侧。

浮动元素也会强制在标记中跟在它们之后的块级元素向上推入容器，因此在标记任何想要出现的内容并填充浮动元素之间的空间时应该遵循。

如果没有高度大于浮动元素的内容，浮动元素也会导致其容器元素的高度崩溃。我们可以通过使用clearfix解决方案来传递这个。一个clearfix解决方案是创建一个新的块格式化上下文，因为它们的一个特性是包含浮点数

块格式化上下文的另一个特性是它们尊重浮点数并且当它们出现在它们旁边时会缩小它们的宽度而不是忽略它。因此可以创建另一个块格式化上下文，它将遵循标签和按钮的浮动并缩小以适应其间的空间。有许多方法可以创建块格式化上下文。在我的演示中，我选择将溢出设置为自动。

.container {
  width: 500px;
  margin: 0 auto;
  overflow: auto;
}

label {
  float: left;
}

button {
  float: right;
}

.input-container {
  overflow: auto;
  padding: 0 10px;
}
input {
  width: 100%;
  box-sizing: border-box;
}

<div class="container">
  
  <label for="">I am label</label>
  <button>Button</button>
  
  <div class="input-container">
      <input type="text">
  </div>
</div>

Here is some information on block formatting contexts

Answer 2

您可以尝试这种方式。

.area-class {
    width: 1200px;
    margin: 0 auto;
}
.area-class-inner {
    overflow: hidden;
}
.single-wrapper {
    width: 33%;
    float: left;
    padding: 0 15px;
}
@media (max-width: 768px) { 
.single-wrapper {
    width: 100%;
}
}

<div class="area-class">
    <div class="area-class-inner">
        <div class="single-wrapper">
            your content
        </div>
        <div class="single-wrapper">
            your content
        </div>
        <div class="single-wrapper">
            your content
        </div>
    </div>
</div>