Question

我为我姐姐编写博客网站，但我遇到了一个无法解决的问题..

我想让她的网站看起来如下：

帖子应该在方形div内，并且一行3个div。但我无法做到这一点。我想让它扩展并适合屏幕，边距。（如以下网站：https://www.chloefromthewoods.com/）

我有以下代码：

(s1, s2) -> s1

CSS：

<div id="mainDiv">
<div id="posts">
            <div id="post1" class="post">
                <div class="postDiv" style="background-image: url(img1.JPG)">
                    Post...
                </div>
            </div>
            <div id="post2" class="post">
                <div class="postDiv" style="background-image: url(img2.JPG)">
                    Post...
                </div>
            </div>
            <div id="post3" class="post">
                <div class="postDiv" style="background-image: url(img3.JPG)">
                    Post...
                </div>
            </div>
</div>
</div>

但它没有用......：

JSFIDDLE：https://jsfiddle.net/9qs34mgw/1/

Answer 1

使用Flexbox：

这将生成3个div，甚至是间隔和内联。它们将根据需要自动扩展。它看起来像很多CSS，但那只是因为我包含了前缀。

HTML

<div class="posts">
    <div class="post"></div>
    <div class="post"></div>
    <div class="post"></div>
</div>

CSS

.posts {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
    }

.post:nth-child(1) {
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto;
    }

.post:nth-child(2) {
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto;
    }

.post:nth-child(3) {
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto;
    }

Answer 2

获得正方形的最简单方法是使用填充框技巧：在各个帖子（项目）上设置height: 0; padding-bottom: 30%; - 这假设margin-left: 5%;垂直填充基于父级的宽度，因此{{1会使post div增长到与父亲宽度相同的高度。将底部填充设置为30％使框增长到框的宽度的100％，形成正方形。在项目上设置padding-bottom: 100%，在父div上设置display: inline-block;以删除使用内联块添加的多余像素。

font-size: 0

* {
  box-sizing: border-box;
}
#mainDiv
{
    max-width: 100%;
    width: auto;
    min-width: 800px;

    margin: 0 auto 300px auto;

    overflow: hidden;
}
#posts {
    width: 100%;
    font-size: 0;
    }
    
    .post {
      display: inline-block;
      width: 30%;
      font-size: 1rem;
    margin-left: 5%;
      height: 0;
    padding-bottom: 30%;
    background-position: center center;
    background-size: cover;


    }

.post:first-child {
     background: green;
     margin-left: 0;
   }

.post:nth-child(2) {
  background: blue;
}

.post:nth-child(3) {
    background: red;
    }
.postDiv
{
    padding: 20px;
    width: 100%;
}

Answer 3

试试这个..

<强> HTML

#mainDiv{height:300px;background-color:#ff8000;}

#posts
{
display:flex;
flex-flow:row wrap;
}

#post1{width:33%;min-width:400px;min-height:400px;flex-grow:1;}
#post2{width:33%;min-width:400px;min-height:400px;flex-grow:1;}
#post3{width:33%;min-width:400px;min-height:400px;flex-grow:1;}

.postDiv{height:100%;}

<强> CSS

<div id="mainDiv">
<div id="posts">
            <div id="post1" class="post">
                <div class="postDiv" style="background-color: green">
                    A bit longer post
                </div>
            </div>
            <div id="post2" class="post">
                <div class="postDiv" style="background-color: blue">
                    Post Post
                </div>
            </div>
            <div id="post3" class="post">
                <div class="postDiv" style="background-color: red">
                    Post...
                </div>
            </div>
</div>
</div>

如何制作适合屏幕的3个相等的方形div？

3 个答案: