响应DIV的。我网站上的帖子没有排队 [英] Responsive DIV's. Posts on my site don't line up

问题描述

我已经和我斗争了好几个星期，我无法弄清楚出了什么问题。我有3列2行。所以上一节共有6个帖子。当一个帖子的标题中的文本数量是一个比其他帖子更长的行时，它似乎将整个网格扔掉了。

I've been battling this for weeks and I just can't figure out what is wrong. I have 3 columns with 2 rows. So a total of 6 posts in on section. When the amount of text in the title of one post is a Line longer than the rest of the posts, it seems to throw the whole grid outta wack.

下面是6盒的代码

        <div class="row block02">
                                <? **sql stuff**
                                ?>
        <div class="col-1-3">
            <div class="wrap-col">

                <a href="blog.php?post_id=<? echo($result_miniblog['post_id']); ?>"><img src="../images/<? echo($result_miniblog['image']); ?>" alt="<? echo($result_miniblog['image_alt']); ?>" /></a>
            <h2>    
                <a class="tag" style="color:#2980b9;" href="#"><? echo($result_miniblog['post_category']); ?></a>
                <a class="headline" href="blog.php?post_id=<? echo($result_miniblog['post_id']); ?>"><? echo($result_miniblog['post_title']); ?></a>
                <a class="byline" href="blah">
                <br />John Doe</a>
            </h2>
            </div>
        </div>

                                <?}?>

    </div>

以下是上述代码的CSS

Here is the CSS for the above code

.block02 {min-height:250px;}
.block02 {margin:20px 10px; text-align:left;}
.block02 p{font-size:16px;}
.block02 img {margin: 0 1em .5em 0; min-width: 100%;height:auto;padding: 0 0 0 0;border:4px solid black;background-size:cover;background-position:center;}

.row{}
.row:before,.row:after { content: '\0020'; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; }
.row:after{clear: both; }
.row{zoom: 1;}

.col-1-3{width:33.33%;}

.byline {font-family:raleway;font-weight:600;text-transform:uppercase;color:silver;}
.byline .logo {color:black;}
.byline .author {color:#999;}
.byline a {text-decoration:none;color:#999}
a.byline {color:#888;font-size:14px;}
a.tag {color:#16a085;font-size:13px;display:block;margin-bottom:.25em;text-transform:uppercase;margin-top:.25em;}
a.headline {color:#000;margin-bottom:.5em;font-size:18px;}

.wrap-col{margin:10px;}

即使图像大小相同，DIV也不会排队

推荐答案

我所看到的是你的col-1-3没有浮动。将css更改为

What I am seeing is that your col-1-3 is not floated. Change that css to

.col-1-3 { width:33.33%; float:left; min-height:200px; }

这篇关于响应DIV的。我网站上的帖子没有排队的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！