如何让我的 DIV 元素仅在没有足够的屏幕空间来显示它们时换行？

Question

我想将以下元素保持在同一直线（水平面）上，前提是有足够的水平空间来这样做……

#profileContainer {
    border-radius: 25px;
    background: #ffffff;
    padding: 10px;
    display: inline-block;
    position: fixed;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.profileField {
        padding: 10px;
        font-family: 'Oxygen', sans-serif;
        font-weight: 300;
        font-size: 20px;
        display: inline-block;
        white-space: nowrap;
}

<div id=“profileContainer”>
<div class="profileField">
    Birthday<br> 
    <div class="select"><div class="select-styled">Select Month</div><ul class="select-options"><li rel="">Select Month</li><li rel="1">January</li><li rel="2">February</li>…<li rel="12">December</li></ul></div>
<div class="select"><div class="select-styled">Select Day</div><ul class="select-options"><li rel="">Select Day</li><li rel="1">1</li><li rel="2">2</li><li rel="3">3</li><li rel="4">4</li>…<li rel="28">28</li><li rel="29">29</li><li rel="30">30</li><li rel="31">31</li></ul></div>
<div class="select"><div class="select-styled">Select Year</div><ul class="select-options"><li rel="">Select Year</li><li rel="1900">1900</li><li rel="1901">1901</li><li rel="1902">1902</li><li rel="1903">1903</li><li rel="1904">1904</li>…<li rel="2019">2019</li><li rel="2020">2020</li><li rel="2021">2021</li></ul></div>
  </div>
</div>

问题是，如果你看看我的 JSFiddle — https://jsfiddle.net/3nwpv8ch/，你会注意到即使你水平压缩屏幕以至于没有足够的空间容纳元素，它们也不会开始换行，而您根本看不到它们。只有在没有足够的水平屏幕可用空间时，我怎样才能让元素换行？如果足够的话，我希望元素继续保持在同一行上。

Answer 1

我想你要找的是flex-wrap: wrap;。它允许您在没有足够空间时包裹 div。

Answer 2

您可以这样做，只需从 profileField 规则中删除 display: inline-block 和 white-space: nowrap

注意：我还临时删除了 translate，这样人们就可以很容易地看到它的行为方式

Updated fiddle

body {
  text-align: center;
}

#profileContainer {
  border-radius: 25px;
  background: #000000;
  padding: 10px;
  display: inline-block;
  position: relative;
}

.profileField {
  padding: 10px;
  font-family: 'Oxygen', sans-serif;
  font-weight: 300;
  font-size: 20px;
}

.selectMenu {
  font-family: 'Oxygen', sans-serif;
  font-size: 20px;
  height: 50px;
  -webkit-appearance: menulist-button;
}

.select-hidden {
  display: none;
  visibility: hidden;
  padding-right: 10px;
}

.select {
  cursor: pointer;
  display: inline-block;
  position: relative;
  font-size: 16px;
  color: #fff;
  width: 220px;
  height: 42px;
}

.select-styled.active {
  background-color: #737373;
}

.select-styled {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: gray;
  padding: 11px 12px;
  -webkit-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
}

.select-options {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  z-index: 999;
  margin: 0;
  padding: 0;
  list-style: none;
  background-color: darken(gray, 5);
}

<div id="profileContainer">

  <div class="profileField">
    Birthday
    <br>
    <div class="select">
      <div class="select-styled">Select Month</div>
      <ul class="select-options">
        <li rel="">Select Month</li>
        <li rel="1">January</li>
        <li rel="2">February</li>
        <li rel="3">March</li>
        <li rel="4">April</li>
        <li rel="5">May</li>
        <li rel="6">June</li>
        <li rel="7">July</li>
        <li rel="8">August</li>
        <li rel="9">September</li>
        <li rel="10">October</li>
        <li rel="11">November</li>
        <li rel="12">December</li>
      </ul>
    </div>
    <div class="select">
      <div class="select-styled">Select Day</div>
      <ul class="select-options">
        <li rel="">Select Day</li>
        <li rel="1">1</li>
        <li rel="2">2</li>
        <li rel="3">3</li>
        <li rel="4">4</li>
        <li rel="5">5</li>
        <li rel="6">6</li>
        <li rel="7">7</li>
        <li rel="8">8</li>
        <li rel="9">9</li>
        <li rel="10">10</li>
        <li rel="11">11</li>
        <li rel="12">12</li>
        <li rel="13">13</li>
        <li rel="14">14</li>
        <li rel="15">15</li>
        <li rel="16">16</li>
        <li rel="17">17</li>
        <li rel="18">18</li>
        <li rel="19">19</li>
        <li rel="20">20</li>
        <li rel="21">21</li>
        <li rel="22">22</li>
        <li rel="23">23</li>
        <li rel="24">24</li>
        <li rel="25">25</li>
        <li rel="26">26</li>
        <li rel="27">27</li>
        <li rel="28">28</li>
        <li rel="29">29</li>
        <li rel="30">30</li>
        <li rel="31">31</li>
      </ul>
    </div>
    <div class="select">
      <div class="select-styled">Select Year</div>
      <ul class="select-options">
        <li rel="">Select Year</li>
        <li rel="1900">1900</li>
        <li rel="1901">1901</li>
        <li rel="1902">1902</li>
        <li rel="1903">1903</li>
        <li rel="1904">1904</li>
        <li rel="1905">1905</li>
        <li rel="1906">1906</li>
        <li rel="1907">1907</li>
        <li rel="1908">1908</li>
        <li rel="1909">1909</li>
        <li rel="1910">1910</li>
        <li rel="1911">1911</li>
        <li rel="1912">1912</li>
        <li rel="1913">1913</li>
        <li rel="1914">1914</li>
        <li rel="1915">1915</li>
        <li rel="1916">1916</li>
        <li rel="1917">1917</li>
        <li rel="1918">1918</li>
        <li rel="1919">1919</li>
        <li rel="1920">1920</li>
        <li rel="1921">1921</li>
        <li rel="1922">1922</li>
        <li rel="1923">1923</li>
        <li rel="1924">1924</li>
        <li rel="1925">1925</li>
        <li rel="1926">1926</li>
        <li rel="1927">1927</li>
        <li rel="1928">1928</li>
        <li rel="1929">1929</li>
        <li rel="1930">1930</li>
        <li rel="1931">1931</li>
        <li rel="1932">1932</li>
        <li rel="1933">1933</li>
        <li rel="1934">1934</li>
        <li rel="1935">1935</li>
        <li rel="1936">1936</li>
        <li rel="1937">1937</li>
        <li rel="1938">1938</li>
        <li rel="1939">1939</li>
        <li rel="1940">1940</li>
        <li rel="1941">1941</li>
        <li rel="1942">1942</li>
        <li rel="1943">1943</li>
        <li rel="1944">1944</li>
        <li rel="1945">1945</li>
        <li rel="1946">1946</li>
        <li rel="1947">1947</li>
        <li rel="1948">1948</li>
        <li rel="1949">1949</li>
        <li rel="1950">1950</li>
        <li rel="1951">1951</li>
        <li rel="1952">1952</li>
        <li rel="1953">1953</li>
        <li rel="1954">1954</li>
        <li rel="1955">1955</li>
        <li rel="1956">1956</li>
        <li rel="1957">1957</li>
        <li rel="1958">1958</li>
        <li rel="1959">1959</li>
        <li rel="1960">1960</li>
        <li rel="1961">1961</li>
        <li rel="1962">1962</li>
        <li rel="1963">1963</li>
        <li rel="1964">1964</li>
        <li rel="1965">1965</li>
        <li rel="1966">1966</li>
        <li rel="1967">1967</li>
        <li rel="1968">1968</li>
        <li rel="1969">1969</li>
        <li rel="1970">1970</li>
        <li rel="1971">1971</li>
        <li rel="1972">1972</li>
        <li rel="1973">1973</li>
        <li rel="1974">1974</li>
        <li rel="1975">1975</li>
        <li rel="1976">1976</li>
        <li rel="1977">1977</li>
        <li rel="1978">1978</li>
        <li rel="1979">1979</li>
        <li rel="1980">1980</li>
        <li rel="1981">1981</li>
        <li rel="1982">1982</li>
        <li rel="1983">1983</li>
        <li rel="1984">1984</li>
        <li rel="1985">1985</li>
        <li rel="1986">1986</li>
        <li rel="1987">1987</li>
        <li rel="1988">1988</li>
        <li rel="1989">1989</li>
        <li rel="1990">1990</li>
        <li rel="1991">1991</li>
        <li rel="1992">1992</li>
        <li rel="1993">1993</li>
        <li rel="1994">1994</li>
        <li rel="1995">1995</li>
        <li rel="1996">1996</li>
        <li rel="1997">1997</li>
        <li rel="1998">1998</li>
        <li rel="1999">1999</li>
        <li rel="2000">2000</li>
        <li rel="2001">2001</li>
        <li rel="2002">2002</li>
        <li rel="2003">2003</li>
        <li rel="2004">2004</li>
        <li rel="2005">2005</li>
        <li rel="2006">2006</li>
        <li rel="2007">2007</li>
        <li rel="2008">2008</li>
        <li rel="2009">2009</li>
        <li rel="2010">2010</li>
        <li rel="2011">2011</li>
        <li rel="2012">2012</li>
        <li rel="2013">2013</li>
        <li rel="2014">2014</li>
        <li rel="2015">2015</li>
        <li rel="2016">2016</li>
        <li rel="2017">2017</li>
        <li rel="2018">2018</li>
        <li rel="2019">2019</li>
        <li rel="2020">2020</li>
        <li rel="2021">2021</li>
      </ul>
    </div>

  </div>
  
  <div class="profileField" style="background-color:green;">
    Line 2 - should be on a new line
  </div>
</div>

根据评论更新

如果你想让 container 在有 space 时增长，你可以这样做，你设置 width: 100% 和 max-width: 720px （总和select 项）在 #profileContainer

Updated fiddle

如何让我的 DIV 元素仅在没有足够的屏幕空间来显示它们时换行？

How do I get my DIV elements to wrap only if there is not enough screen real estate to display them?

css

inline