在较小的视口宽度下将 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{&nbsp;&nbsp;&nbsp; margin-top:10px ;&nbsp; width: 100%;&nbsp; position: relative;&nbsp;&nbsp; height: 120px;&nbsp;&nbsp;&nbsp; color: #0ddF00;&nbsp; display: flex;&nbsp; flex-direction: row;&nbsp;}&nbsp;.m1 {&nbsp;&nbsp; &nbsp;width: 25%;&nbsp; &nbsp;&nbsp; &nbsp;margin: auto;&nbsp; &nbsp;text-align: center;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;float: left;}&nbsp;@media only screen and (max-width: 600px) {&nbsp; .MenuSett{&nbsp;&nbsp; &nbsp; flex-direction: column;&nbsp;&nbsp; }}

Answer 2

您可以添加 Flexbox.MenuSett并使用flex-wrap: wrap它来使其子项以较小的视口宽度进入新行。请注意，您需要设置宽度的绝对值，例如250px。这是因为width: 25%，无论视口宽度如何，子级将始终是其父级的 25%，因此始终将它们显示在一行上。.MenuSett {&nbsp; margin-top: 10px;&nbsp; width: 100%;&nbsp; position: relative;&nbsp; height: 120px;&nbsp; color: #0ddF00;&nbsp;&nbsp;&nbsp; /* Introduce Flexbox to parent */&nbsp; display: flex;&nbsp;&nbsp;&nbsp; /* Allow children to wrap to the next line */&nbsp; flex-wrap: wrap;}.m1 {&nbsp; /* At larger viewports, children will be 25% of parent */&nbsp; width: 25%;&nbsp;&nbsp;&nbsp; /* At viewports smaller than ~1000px, children will start&nbsp; &nbsp; &nbsp;wrapping because they have a minimum width set. Change&nbsp; &nbsp; &nbsp;this value as needed. */&nbsp; min-width: 250px;&nbsp;&nbsp;&nbsp; margin: auto;&nbsp; text-align: center;&nbsp; float: left;}<div class="MenuSett">&nbsp; <div class="m1">&nbsp; &nbsp; <p>This content is ok</p>&nbsp; &nbsp; <div ngbDropdown class="d-inline-block">&nbsp; &nbsp; &nbsp; <button class="btn btn-outline-primary" id="dropdownBasic1" ngbDropdownToggle>Toggle dropdown</button>&nbsp; &nbsp; &nbsp; <div ngbDropdownMenu aria-labelledby="dropdownBasic1">&nbsp; &nbsp; &nbsp; &nbsp; <button ngbDropdownItem>Action - 1</button>&nbsp; &nbsp; &nbsp; &nbsp; <button ngbDropdownItem>Another Action</button>&nbsp; &nbsp; &nbsp; &nbsp; <button ngbDropdownItem>Something else is here</button>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; </div>&nbsp; <div class="m1">&nbsp; &nbsp; <p>This content is ok</p>&nbsp; &nbsp; <div ngbDropdown class="d-inline-block">&nbsp; &nbsp; &nbsp; <button class="btn btn-outline-primary" id="dropdownBasic1" ngbDropdownToggle>Toggle dropdown</button>&nbsp; &nbsp; &nbsp; <div ngbDropdownMenu aria-labelledby="dropdownBasic1">&nbsp; &nbsp; &nbsp; &nbsp; <button ngbDropdownItem>Action - 1</button>&nbsp; &nbsp; &nbsp; &nbsp; <button ngbDropdownItem>Another Action</button>&nbsp; &nbsp; &nbsp; &nbsp; <button ngbDropdownItem>Something else is here</button>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; </div>&nbsp; <div class="m1">&nbsp; &nbsp; <p>This content is ok</p>&nbsp; &nbsp; <div ngbDropdown class="d-inline-block">&nbsp; &nbsp; &nbsp; <button class="btn btn-outline-primary" id="dropdownBasic1" ngbDropdownToggle>Toggle dropdown</button>&nbsp; &nbsp; &nbsp; <div ngbDropdownMenu aria-labelledby="dropdownBasic1">&nbsp; &nbsp; &nbsp; &nbsp; <button ngbDropdownItem>Action - 1</button>&nbsp; &nbsp; &nbsp; &nbsp; <button ngbDropdownItem>Another Action</button>&nbsp; &nbsp; &nbsp; &nbsp; <button ngbDropdownItem>Something else is here</button>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; </div>&nbsp; <div class="m1">&nbsp; &nbsp; <p>This content is ok</p>&nbsp; &nbsp; <div ngbDropdown class="d-inline-block">&nbsp; &nbsp; &nbsp; <button class="btn btn-outline-primary" id="dropdownBasic1" ngbDropdownToggle>Toggle dropdown</button>&nbsp; &nbsp; &nbsp; <div ngbDropdownMenu aria-labelledby="dropdownBasic1">&nbsp; &nbsp; &nbsp; &nbsp; <button ngbDropdownItem>Action - 1</button>&nbsp; &nbsp; &nbsp; &nbsp; <button ngbDropdownItem>Another Action</button>&nbsp; &nbsp; &nbsp; &nbsp; <button ngbDropdownItem>Something else is here</button>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; </div></div>

Answer 3

我会使用弹性：.MenuSett{&nbsp;&nbsp;&nbsp; margin-top:10px;&nbsp; width: 100%;&nbsp; position: relative;&nbsp;&nbsp; height: 120px;&nbsp;&nbsp;&nbsp; color: #0ddF00;&nbsp; display: inline-block;&nbsp; display: flex;&nbsp; flex-direction: row;&nbsp; flex-wrap: wrap;}&nbsp;.m1 {&nbsp;&nbsp; &nbsp;flex: 1;&nbsp;&nbsp; &nbsp;margin: auto;&nbsp; &nbsp;text-align: center;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;float: left;}&nbsp;父级.MenuSett将具有display: flex;, flex-direction: row;& flex-wrap: wrap;，子级.m1将具有flex: 1, 且不设置宽度。但是您也可能会执行一些媒体查询，因为在某些最小屏幕宽度下同时具有 4 列可能会太多。像这样的：@media screen and (max-width: 500px) {&nbsp; .m1 {&nbsp;&nbsp; &nbsp;flex: 1 0 100%;&nbsp; }}@media screen and (min-width: 700px) {&nbsp; .m1 {&nbsp;&nbsp; &nbsp; flex: 1 0 50%;&nbsp; }}@media screen and (min-width: 900px) {&nbsp; .m1 {&nbsp;&nbsp; &nbsp; flex: 1 0 25%;&nbsp; }}