我尝试创建一个简单的CSS网格布局，可能带有bootstrap，正好有5个不同大小的盒子，应该完全填满一个容器盒。 我搜索了stackoverflow和几个网站，但发现没有什么真正适合。
以下是问题代码，请转到http://galaxy.vandango.org/test/index1.htm查看结果：
class OuterClass
{
public static class StatClass
{
{
System.out.println("Hello"); // This line doesn't work
}
void pow()
{ System.out.println("Hello W");}
}
}
public class Example
{
public static void main(String[] args)
{
OuterClass.StatClass statInner1 = new OuterClass.StatClass();
statInner1.pow();
OuterClass.StatClass statInner2 = new OuterClass.StatClass();
statInner2.pow();
}
}
我真正需要的是以下内容： http://galaxy.vandango.org/test/index2.htm
但是如果我添加以下css类并将类名添加到方框4和5中，我只能完成它。
<!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>
有没有什么好方法可以让这种更简单，更灵活？
答案 0 :(得分：3)
不要使用Javascript（甚至更多，jQuery！），请使用flex-box。
我发现css-tricks的资源非常有用。
容器正在使用display: flex来使用justify-content: space-around，以确保您的列在容器内对齐。
然后，每列都使用display: inline-flex和flex-direction: column来完成您正在寻找的内容。
这个解决方案（在我脑海中）的唯一缺点是你需要以错误的顺序生成你的div，即 1,2,4,3,5 ，但很难判断这是不是一个问题。
此外，在回复＆＃34;它不兼容＆＃34;，它在整个网络中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>
答案 1 :(得分：0)
请参阅paulie_D的评论：来自 JQuery 的 Masonry layout 是正确的！