我有 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換行時如何將其向下推？？？？
3 回答
人到中年有點甜
TA貢獻1895條經驗 獲得超7個贊
如果您希望它們位于彼此下方，則可以在父級中顯示 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;
}
}
哈士奇WWW
TA貢獻1799條經驗 獲得超6個贊
您可以添加 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>
料青山看我應如是
TA貢獻1772條經驗 獲得超8個贊
我會使用彈性：
.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%;
}
}
- 3 回答
- 0 關注
- 173 瀏覽
添加回答
舉報
0/150
提交
取消