html - 响应式设计 : getting content in middle to flow

Question

我有一个布局，屏幕的两边都有一个按钮。 内容在按钮之间。

如何在 View 足够大时让内容显示在按钮之间，但当内容开始与按钮之间的空间重叠时下拉并填充剩余空间。

按钮是固定大小的

nav ul li:first-child {

  float: left;

}

nav ul li:last-child {

  float: right;

}

nav ul li:first-child,

nav ul li:last-child {

  display: table-cell;

}

<nav role="navigation">
  <ul>
    <li>
      <input type="submit" value="Back">
    </li>
    <li>
      <button>next</button>
    </li>
  </ul>
</nav>
<div id="content">
  <input type="text" />
  <input type="text" />
  <input type="text" />
</div>


<p>"#content" should extract itself from between buttons to next 'line' when page gets smaller, then when that is too small as well, it can start blocking up the inputs.</p>

Answer 1

在这里 fiddle :https://jsfiddle.net/8g25hjw5/

通过做这样的事情:

<nav role="navigation">
  <ul>
    <li>
      <input type="submit" value="Back">
    </li>
    <li>
      <button>next</button>
    </li>
  </ul>
</nav>
<div id="content">
    <div>
        <input type="text" />
        <input type="text" />
        <input type="text" />
    </div>
</div>

ul {
  list-style: none;
}

nav ul li:first-child {
  float: left;
}

nav ul li:last-child {
  float: right;
}

#content {
  display: table;
}

#content div {
  display: table-row;
}

#content input {
  display: table-cell;
}

@media screen and (max-width: 700px) {   

    #content {
      clear: both;
    }
}