Question

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

以下是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

.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's not lining up even when images are same size

Answer 1

＆＃13;

.row {
  width: 100vw;
  height: 10vh;
  text-align: center;
}

.col {
  width: calc(100% / 3);
  float: left;
}

＆＃13;

<div class="row">
   <div class="col col-1">
    row 1 column 1
   </div>
   <div class="col col-2">
    row 1 column 2  
   </div>
   <div class="col col-3">
    row 1 column 3
   </div>
</div>

<div class="row">
   <div class="col col-1">
    row 1 column 1
   </div>
   <div class="col col-2">
    row 1 column 2  
   </div>
   <div class="col col-3">
    row 1 column 3
   </div>
</div>

＆＃13;

Answer 2

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

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

响应DIV的。我网站上的帖子没有排队

2 个答案: