Question

我有四个div按顺序排列。如果内容适合，我希望每个人都占据页面的一角，否则按顺序垂直排列。

＆＃13;

#pptopleft,
#pptopright,
#ppbottomleft,
#ppbottomright {
	text-align: center;
	border: 1px solid black;
	width: 50%;
}
#ppcontainer {
    border: 1px solid black;
    font-size: 120%;
    min-height: 250px;
    margin-top: 20px;
    margin-left: 50px;
    margin-right: 50px;
    padding-left: 3px;
    padding-right: 3px;
    padding-top: 3px;
    padding-bottom: 3px;
    overflow: auto;
}

＆＃13;

<div id="ppcontainer">
    <div id="pptopleft">#1</div>
    <div id="pptopright">#2</div>
    <div id="ppbottomleft">#3</div>
    <div id="ppbottomright">#4</div>
</div>

＆＃13;

如果它们适合，我希望它们各自占据父容器的50％宽度，但如果它们需要垂直堆叠，则每个容器应采用100％宽度。如下所示：

//contents of each div will fit without wrapping
1 2
3 4

//contents of each div will not fit without wrapping
1
2
3
4

后者可能用于较小的分辨率或移动设备。

如何使用CSS实现此目的？

Answer 1

媒体查询可以帮助解决这个问题。例如，在当前CSS之后添加以下内容：

@media all and (max-width: 500px) {
    #pptopleft,
    #pptopright,
    #ppbottomleft,
    #ppbottomright {
        width: 100%;
    }
}

更改500px以匹配您想要的任何断点，并将现有div设置为float: left。

Answer 2

使用Bootstrap：并按以下结构构建div

<div class="container-fluid">
  <div class="row">
    <div id="1" class="col-md-6"></div>
    <div id="2" class="col-md-6"></div>
  </div>
  <div class="row">
    <div id="3" class="col-md-6"></div>
    <div id="4" class="col-md-6"></div>
  </div>
</div>

平铺div顶部/底部右/左，水平最大div数？

2 个答案: