Question

我想要一张包含3 <input> s和下面一个textarea的表单。所有这些都在一个容器内。 2个第一个<input>具有最小和最大宽度，第3个输入的％具有最小和％但没有最大宽度。
我希望当我让窗户足够大以使第一和第二达到它们的最大宽度时，第三个增长到100％而不是限制在45％而其余的停留在空间。

HTML：

＆＃13;

.container{
  width: 70%;
  margin: 0px auto;
  padding: 10px;
}
.form{
  text-align: center;
}
#text{
  margin-top: 5px;
  width: 95%;
}
#iName{
  width: 15%;
  min-width: 45px;
  max-width: 70px;
}
#iDate{
  width: 30%;
  min-width: 120px;
  max-width: 150px;
}
#iTitle{
  width: 45%;
  min-width: 120px;
}

＆＃13;

<div id="container" class="container">
  <div id="form" class="form">
    <input id="iDate" value="28/03/2017 13:19"></input>
    <input id="iName" value="Jhon"></input>
    <input id="iTitle" value="My title"></input><br>
    <textarea id="text" rows="4" cols="50">
     Some Text
    </textarea><br>
    <button id="update">Update</button>
  </div>
   ...
</div>

＆＃13;

Answer 1

使用flexbox这是一个很好的案例。 https://jsfiddle.net/2nfo8exr/

正如您所看到的，您仍然可以设置min-width和max-width限制，但它会确保使用第3个输入上的所有剩余空间填满宽度。

另请注意，input代码是自动关闭的，您不需要</input>，因为它不是有效的HTML。

Answer 2

也许这解决了问题（如果我正确理解了问题）。

#iTitle {
    /*
    where 95% is the width of textarea
    where 150px + 70px is the max width of the other inputs
    where -12px is the space (4px * 3) in between div elements
    */
    width: calc(95% - (150px + 70px) - 12px);
    min-width: 120px;
}

Answer 3

这里可以使用纯代码而无需任何添加

<强> HTML

<div id="container" class="container">
<div class="row">
    <div id="form" class="form">
      <input id="iDate" value="28/03/2017 13:19">
      <input id="iName" value="Jhon">
      <input id="iTitle" value="My title"><br>
      <textarea id="text" rows="4">ASfadfasbncaksjb</textarea>
     <br />
     <button id="update">Update</button>
</div>

<强> CSS

.container {
  width: 70%;
  margin:0 auto;
}
.form {
  text-align: center;
}

#text {
  margin-top: 5px;
  width: 98%;
}
#iName {
  width: 15%;
}
#iDate {
  width: 40%;
}
#iTitle {
  width: 40%;
}

div中有三个跨度，最右边跨度占据所有宽度

3 个答案: