文章/答案/技术大牛

发布

社区首页 >问答首页 >作为流体设计的5盒CSS网格布局

问作为流体设计的5盒CSS网格布局
EN

Stack Overflow用户

提问于 2016-07-20 11:13:37

回答 2查看 80关注 0票数 1

我试图创建一个简单的CSS网格布局，也许使用引导程序，正好有5个大小不同的盒子，完全可以填充一个容器框。我搜索了堆叠溢出和几个网站，但发现没有真正适合。

下面是问题代码，转到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;
}

有什么好办法让这个更简单、更灵活吗？

css

twitter-bootstrap

grid-layout

html

回答 2

Stack Overflow用户

回答已采纳

发布于 2016-07-20 12:05:36

不要使用Javascript (或者更多，jQuery!)，使用flex-box。

我发现css-技巧的资源非常有用。

容器使用display: flex来使用确保列在容器内对齐的justify-content: space-around。

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

这个解决方案的唯一缺点(在我的头脑中)是这样一个事实:您需要以错误的顺序生成div，即1、2、4、3、5，但是很难判断这是否是一个问题。

另外，在回答“它不兼容”时，它在整个网络上都是相当有用。

我使用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>

票数 3

Stack Overflow用户

发布于 2016-07-20 11:51:08

参见paulie_D的评论：砌体布局来自JQuery是正确的！

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/38479703

复制

相似问题

问作为流体设计的5盒CSS网格布局
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问作为流体设计的5盒CSS网格布局EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问作为流体设计的5盒CSS网格布局
EN