代码之家 › 专栏 › 技术社区 › Jason C

容器收缩时长选择/文本框输入的收缩宽度

flexbox css html

Jason C · 技术社区 · 8 年前

这里的问题是,当青色含量太宽时,它会增加父div的大小,但我所做的是希望

文本框输入默认大小只是…宽。

这都是使用flex布局。我只想通过缩小输入的宽度来缩小左下角(标签列应该保持不变)。

我愿意不提前知道黄色/蓝色内容的大小,它们都是动态生成的。我只知道黄色的那个足够宽,可以舒适地容纳底部的所有内容,假设我可以稍微收缩输入。

var state = true;
window.setInterval(function () {
  document.getElementById('example-stuff2').style.width = (state ? '10px' : '100px');
  state = !state;
}, 2000);

div { border: 1px solid red; }

#content, #panel, #bottom { display: flex; }
#content, #panel { flex-direction: column; }
#content { align-items: center; }
#bottom-right { flex-grow: 1; }

/* Example placeholders for content of unknown size. */
span { display: inline-block; }
#example-stuff1 { background: yellow; width: 300px; height: 120px; }
#example-stuff2 { background: cyan; width: 100px; height: 10px; }

<div id="content">
  <div id="panel">
    <div id="top"><span id="example-stuff1"></span></div>
    <div id="bottom">
      <div id="bottom-left"> 
        <table>
        <tr><td>Label:
            <td>
              <select>
                <option>Option 1</option>
                <option>Option 2 is a pretty long one</option>
                <option>Option 3</option>
              </select>
        <tr><td>Label:
            <td><input type="textbox" value="example">
        </table> 
      </div>
      <div id="bottom-right"><span id="example-stuff2"></span></div>
    </div>
  </div>
</div>

(注意:青色部分的宽度在时间之前是未知的,但在呈现页面后它是不变的(与片段不同)。它可能很窄(在这种情况下,所有内容都适合),也可能有点太宽(在这种情况下,我遇到了需要缩减输入的问题)。片段中的动画只是为了说明这个问题的两种情况,实际上,青色内容是在服务页面时确定的,并保持不变。)

1 回复 | 直到 8 年前

Michael Benjamin William Falcon 8 年前

有没有办法限制输入大小,使下半部分的总宽度不超过上半部分的总宽度(黄色)?基本上,我希望整个东西都是黄色框的宽度,如果右下角太宽,左下角的div就会缩小。

#example-stuff1 )定义的宽度为300px。

#top ,这是一个兄弟姐妹 #bottom

此外,没有一个容器具有定义的宽度。

#底部 没有宽度限制,因为它与 #顶部 width: 100%

因此,我的第一个建议是定义一个宽度,该宽度将约束两行的宽度。

您还需要了解 default minimum size of flex items ,这将需要使用 min-width: 0 .

var state = true;
window.setInterval(function () {
  document.getElementById('example-stuff2').style.width = (state ? '10px' : '100px');
  state = !state;
}, 2000);

#bottom-left {
  display: flex;
  flex-wrap: wrap;
  min-width: 0;
}

#bottom-left > label {
  flex: 0 0 20%;
  margin: 5px;
}

#bottom-left > select,
#bottom-left > input {
  flex: 1 0 65%;
  min-width: 0;
  margin: 5px;
}

div {
  border: 1px solid red;
}

#content, #panel, #bottom {
  display: flex;
  width: 300px;
}

#content, #panel {
  flex-direction: column;
}

#content {
  align-items: center;
}

#bottom-right {
  flex-grow: 1;
}


/* Example placeholders for content of unknown size. */

span {
  display: inline-block;
}

#example-stuff1 {
  background: yellow;
  width: 100%;
  height: 120px;
}

#example-stuff2 {
  background: cyan;
  width: 100px;
  height: 10px;
}

<div id="content">
  <div id="panel">
    <div id="top"><span id="example-stuff1"></span></div>
    <div id="bottom">
      <div id="bottom-left">
        <label>Label:</label>
        <select>
          <option>Option 1</option>
          <option>Option 2 is a pretty long one</option>
          <option>Option 3</option>
        </select>
        <label>Label:</label>
        <input type="textbox" value="example">
      </div>
      <div id="bottom-right"><span id="example-stuff2"></span></div>
    </div>
  </div>
</div>

容器收缩时长选择/文本框输入的收缩宽度

jsFiddle