在较小的视口宽度下将 4 个 div 对齐为每行 2 个

Question

我有 4div个从左到右水平对齐的。每个div都是屏幕宽度的 25%。当用户最小化屏幕时，我需要让它们换行，而不是彼此重叠。.MenuSett {  margin-top: 10px;  width: 100%;  position: relative;  height: 120px;  color: #0ddF00;  display: inline-block;}.m1 {  width: 25%;  margin: auto;  text-align: center;  float: left;}<div clas="MenuSett">  <div class="m1">    <p>This content is ok</p>    <div ngbDropdown class="d-inline-block">      <button class="btn btn-outline-primary" id="dropdownBasic1" ngbDropdownToggle>Toggle dropdown</button>      <div ngbDropdownMenu aria-labelledby="dropdownBasic1">        <button ngbDropdownItem>Action - 1</button>        <button ngbDropdownItem>Another Action</button>        <button ngbDropdownItem>Something else is here</button>      </div>    </div>  </div>  <div class="m1">    <p>This content is ok</p>    <div ngbDropdown class="d-inline-block">      <button class="btn btn-outline-primary" id="dropdownBasic1" ngbDropdownToggle>Toggle dropdown</button>      <div ngbDropdownMenu aria-labelledby="dropdownBasic1">        <button ngbDropdownItem>Action - 1</button>        <button ngbDropdownItem>Another Action</button>        <button ngbDropdownItem>Something else is here</button>      </div>    </div>  </div>  <div class="m1">    <p>This content is ok</p>    <div ngbDropdown class="d-inline-block">      <button class="btn btn-outline-primary" id="dropdownBasic1" ngbDropdownToggle>Toggle dropdown</button>      <div ngbDropdownMenu aria-labelledby="dropdownBasic1">        <button ngbDropdownItem>Action - 1</button>        <button ngbDropdownItem>Another Action</button>        <button ngbDropdownItem>Something else is here</button>      </div>    </div>  </div>在该 div 下面有.belowDiv {      position: relative;     height:350px; }当上面的div换行时如何将其向下推？？？？

Answer 1

如果您希望它们位于彼此下方，则可以在父级中显示 Flex，flex-direction: row;并且媒体查询将 Flex-Direction 更改为列

flex-direction: column;

.MenuSett{  

  margin-top:10px ;

  width: 100%;

  position: relative; 

  height: 120px;  

  color: #0ddF00;

  display: flex;

  flex-direction: row; 

} 

.m1 { 

   width: 25%;   

   margin: auto;

   text-align: center;    

   float: left;

} 

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

  .MenuSett{ 

    flex-direction: column; 

  }

}

Answer 2

您可以添加 Flexbox.MenuSett并使用flex-wrap: wrap它来使其子项以较小的视口宽度进入新行。

请注意，您需要设置宽度的绝对值，例如250px。这是因为width: 25%，无论视口宽度如何，子级将始终是其父级的 25%，因此始终将它们显示在一行上。

.MenuSett {

  margin-top: 10px;

  width: 100%;

  position: relative;

  height: 120px;

  color: #0ddF00;

  

  /* Introduce Flexbox to parent */

  display: flex;

  

  /* Allow children to wrap to the next line */

  flex-wrap: wrap;

}

.m1 {

  /* At larger viewports, children will be 25% of parent */

  width: 25%;

  

  /* At viewports smaller than ~1000px, children will start

     wrapping because they have a minimum width set. Change

     this value as needed. */

  min-width: 250px;

  

  margin: auto;

  text-align: center;

  float: left;

}

<div class="MenuSett">

  <div class="m1">

    <p>This content is ok</p>

    <div ngbDropdown class="d-inline-block">

      <button class="btn btn-outline-primary" id="dropdownBasic1" ngbDropdownToggle>Toggle dropdown</button>

      <div ngbDropdownMenu aria-labelledby="dropdownBasic1">

        <button ngbDropdownItem>Action - 1</button>

        <button ngbDropdownItem>Another Action</button>

        <button ngbDropdownItem>Something else is here</button>

      </div>

    </div>

  </div>

  <div class="m1">

    <p>This content is ok</p>

    <div ngbDropdown class="d-inline-block">

      <button class="btn btn-outline-primary" id="dropdownBasic1" ngbDropdownToggle>Toggle dropdown</button>

      <div ngbDropdownMenu aria-labelledby="dropdownBasic1">

        <button ngbDropdownItem>Action - 1</button>

        <button ngbDropdownItem>Another Action</button>

        <button ngbDropdownItem>Something else is here</button>

      </div>

    </div>

  </div>

  <div class="m1">

    <p>This content is ok</p>

    <div ngbDropdown class="d-inline-block">

      <button class="btn btn-outline-primary" id="dropdownBasic1" ngbDropdownToggle>Toggle dropdown</button>

      <div ngbDropdownMenu aria-labelledby="dropdownBasic1">

        <button ngbDropdownItem>Action - 1</button>

        <button ngbDropdownItem>Another Action</button>

        <button ngbDropdownItem>Something else is here</button>

      </div>

    </div>

  </div>

  <div class="m1">

    <p>This content is ok</p>

    <div ngbDropdown class="d-inline-block">

      <button class="btn btn-outline-primary" id="dropdownBasic1" ngbDropdownToggle>Toggle dropdown</button>

      <div ngbDropdownMenu aria-labelledby="dropdownBasic1">

        <button ngbDropdownItem>Action - 1</button>

        <button ngbDropdownItem>Another Action</button>

        <button ngbDropdownItem>Something else is here</button>

      </div>

    </div>

  </div>

</div>

Answer 3

我会使用弹性：

.MenuSett{  

  margin-top:10px;

  width: 100%;

  position: relative; 

  height: 120px;  

  color: #0ddF00;

  display: inline-block;

  display: flex;

  flex-direction: row;

  flex-wrap: wrap;

} 

.m1 { 

   flex: 1; 

   margin: auto;

   text-align: center;    

   float: left;

} 

父级.MenuSett将具有display: flex;, flex-direction: row;& flex-wrap: wrap;，子级.m1将具有flex: 1, 且不设置宽度。

但是您也可能会执行一些媒体查询，因为在某些最小屏幕宽度下同时具有 4 列可能会太多。像这样的：

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

  .m1 { 

   flex: 1 0 100%;

  }

}

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

  .m1 { 

    flex: 1 0 50%;

  }

}

@media screen and (min-width: 900px) {

  .m1 { 

    flex: 1 0 25%;

  }

}