5 Box CSS 网格布局作为流畅的设计

Question

我尝试创建一个简单的 CSS 网格布局，也许 bootstrap，恰好有 5 个不同大小的盒子，应该完全填满一个容器盒子。我搜索了 Whosebug 和几个网站，但没有找到真正合适的东西。

这里是问题代码，去http://galaxy.vandango.org/test/index1.htm看结果：

<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Index</title>
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">

<style>

    .box {
        border: 1px solid #336c96;
        border-radius: 5px;
        margin: 5px;
        width: 300px;
    }

    .item1 {
        height: 500px;
    }

</style>
</head>
<body>

<div class="container">
    <div class="row">
        <div class="col-md-4 box item1">
            <h4>1</h4>
            <p>
                Donec id elit non mi porta gravida at eget metus.
                Fusce dapibus, tellus ac cursus commodo, tortor mauris
                condimentum nibh, ut fermentum massa justo sit amet
                risus. Etiam porta sem malesuada magna mollis euismod.
                Donec sed odio dui.
                <br>
                7897897
                <br>
                7897897
                <br>
                7897897
                <br>
                Donec id elit non mi porta gravida at eget metus.
                Fusce dapibus, tellus ac cursus commodo, tortor mauris
                condimentum nibh, ut fermentum massa justo sit amet
                risus. Etiam porta sem malesuada magna mollis euismod.
                Donec sed odio dui.
            </p>
        </div>

        <div class="col-md-4 box">
            <h4>2</h4>
            <p>
                Donec id elit non mi porta gravida at eget metus.
                Fusce dapibus, tellus ac cursus commodo, tortor mauris
                condimentum nibh, ut fermentum massa justo sit amet
                risus. Etiam porta sem malesuada magna mollis euismod.
                Donec sed odio dui.
            </p>
        </div>

        <div class="col-md-4 box">
            <h4>3</h4>
            <p>
                Donec id elit non mi porta gravida at eget metus.
                Fusce dapibus, tellus ac cursus commodo, tortor mauris
                condimentum nibh.
            </p>
        </div>

        <div class="col-md-4 box">
            <h4>4</h4>
            <p>
                Donec id elit non mi porta gravida at eget metus.
                Fusce dapibus, tellus ac cursus commodo, tortor mauris
                condimentum nibh, ut fermentum massa justo sit amet
                risus. Etiam porta sem malesuada magna mollis euismod.
                Donec sed odio dui.
            </p>
        </div>

        <div class="col-md-4 box">
            <h4>5</h4>
            <p>
                Donec id elit non mi porta gravida at eget metus.
                Fusce dapibus, tellus ac cursus commodo, tortor mauris
                condimentum nibh, ut fermentum massa justo sit amet
                risus. Etiam porta sem malesuada magna mollis euismod.
                Donec sed odio dui.

                <br>
                123
                <br>

                Donec id elit non mi porta gravida at eget metus.
                Fusce dapibus, tellus ac cursus commodo, tortor mauris
                condimentum nibh, ut fermentum massa justo sit amet
                risus. Etiam porta sem malesuada magna mollis euismod.
                Donec sed odio dui.
            </p>
        </div>
    </div>
</div>

<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
</body></html>

我真正需要的是： http://galaxy.vandango.org/test/index2.htm

但我只有添加以下内容才能完成它 css 类并将类名添加到框 4 和 5.

.item4 {
    position: relative;
    top: 40px;
    right: 310px;
}

.item5 {
    position: relative;
    top: -185px;
    right: -310px;
}

有什么好的方法可以让这个更简单更灵活吗？

Answer 1

查看来自 paulie_D 的评论：来自 JQuery 的 Masonry 布局 是正确的！

Answer 2

不要使用 Javascript（甚至更多，jQuery！），使用 flex-box。

我发现 css-tricks 上的资源非常有用。

容器正在使用 display: flex 以便能够使用 justify-content: space-around 确保您的列在容器内对齐。

然后每一列都使用 display: inline-flex 和 flex-direction: column 来完成您要查找的内容。

此解决方案的唯一缺点（在我看来）是您需要以 错误的 顺序生成 div，即 1、2、 4, 3, 5，但很难判断这是否会成为问题。

此外，在回复 "It's not compatible" 时，整个网络都是 pretty usable。

我使用 javascript 填充文本框以使 HTML 更易于检查。

var texts = {
  1: "Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. <br> 7897897 <br>7897897 <br>7897897 <br>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.",
  2: "Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.",
  3: "Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.",
  4: "Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.",
  5: "Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. 123 Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui."
}
for (x in texts) {
  document.getElementById(String(x)).innerHTML = '<h4>' + String(x) + '</h4>' + texts[x];
}

.container {
  display: flex;
  justify-content: space-around;
  width: 1000px;
  margin: 0 auto;
}
.col {
  display: inline-flex;
  flex-direction: column;
}
.box {
  width: 300px;
  border: 1px #336c96 solid;
  padding: 0 10px 10px 10px;
  border-radius: 5px;
  margin: 10px;
}

<div class="container">
  <div class="col">
    <div id="1" class="box">1</div>
  </div>
  <div class="col">
    <div id="2" class="box">2</div>
    <div id="4" class="box">4</div>
  </div>
  <div class="col">
    <div id="3" class="box">3</div>
    <div id="5" class="box">5</div>
  </div>
</div>

5 Box CSS 网格布局作为流畅的设计

5 Box CSS Grid Layout as a fluid design

html

css

grid-layout

twitter-bootstrap