Responsive DIV's. Posts on my site don't line up

问题

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.

Below is the code for the 6 boxes

        <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>

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

回答1:

.row {
  width: 100vw;
  height: 10vh;
  text-align: center;
}

.col {
  width: calc(100% / 3);
  float: left;
}

<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>

回答2:

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; }

来源：https://stackoverflow.com/questions/40771433/responsive-divs-posts-on-my-site-dont-line-up

标签

css

html5

responsive-design