Question

<div class="div1">required styles applied</div>
<div class="div2">required styles applied</div>
<div class="div1">required styles applied</div>
<div class="div2">required styles applied</div>

我的代码如图1所示。但我想将其转换为第二个。我怎么能这样做？

Answer 1

您可以使用flexbox和order第三项作为第二项。

Example

代码：

container {
  display:flex;
  flex-wrap:wrap;
  justify-content:space-around;
}

.div1,.div2 {
  background:green;
  text-align: center;
  color:#fff;
  width: 48%;
}

.div1 {
  min-height: 120px;
  margin: 30px 0px;
  line-height: 120px;
}

.div2 {
  min-height: 250px;
  line-height: 250px;
}

div:nth-child(2) {
  order:1;
}

Answer 2

使用列方法 - 这会将div保持原始顺序：

<!DOCTYPE: html>
<html>
<head>
<title>Four divs</title>
<style type="text/css">

html, body
{
    height: 100%;
}

.columnate
{
    height: 100%;

    -webkit-column-count: 2; /* older webkit */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;

    -webkit-column-gap: 1em;
    -moz-column-gap: 1em;
    column-gap: 1em;

    padding: 1em
}

.div1,
.div2
{
    height: 30%;
    border: 1px solid #000000;
    margin: 0px auto 1em auto;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
}

.div2
{
    height: 50%;
}

.div2:nth-of-type(1)
{
    break-after: column;
}

</style>
</head>
<body>
<div class="columnate">
    <div class="div1">required styles applied</div>
    <div class="div2">required styles applied</div>
    <div class="div1">required styles applied</div>
    <div class="div2">required styles applied</div>
</div>
</body>
</html>

Answer 3

在这种情况下，我非常支持使用bootstrap。您所需要的只是资源是2行代码。

<style type="text/css" rel="stylesheet" https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css></style>
<script type="text/javascript" https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js></script>

然后我用引导列包围了div，如下所示：

<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
    <div class="div1">required styles applied</div>
    <div class="div2">required styles applied</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
    <div class="div1">required styles applied</div>
    <div class="div2">required styles applied</div>
</div>

然后添加了一些样式，以便您可以看到它们的外观。

.div1 {
    width: 100%;
    background: #EBEBEB;
    height: 200px;
    margin-bottom: 15px;
}
.div2 {
    width: 100%;
    background: #506ACA;
    height: 400px;
    margin-bottom: 15px;
}

关于这一点的好处是它简短而甜蜜，不难理解，并且还可以为移动解决方案做好准备。

查看此Fiddle以了解我的意思。

如果您对使用此框架感兴趣，

Here是学习Bootstrap的链接。

希望这有帮助！

CSS Div定位4个div

3 个答案: