将 div 个并排对齐

Question

如您所见，我在将 4 个 div 并排对齐时遇到了一些问题：

出于某种原因，我无法让它们对齐。谁能告诉我怎么了？

html:

<?php foreach ($postslist as $post) : setup_postdata($post); ?>
        <div class="frontPost">
            <a href="<?php the_permalink();?>">

                    <div class="crop">
                        <img class="postImg" src="<?php the_field('frontimg')?>" alt="frontImg">
                    </div>
                    <p class="postTitle"> <?php the_title()?> </p>
                    <p class="postIntro"> <?php the_field('introduction') ?> </p>
            </a>
        </div>

<?php endforeach; ?>

css:

.crop {
width: 250px;
height: 150px;
overflow: hidden;
}

.frontPost{
width: 250px;
display: inline-block;
margin-left: 5px;
margin-top: 25px;
margin-right: 5px;
}

.bigTxt{
letter-spacing: 10px;
font-size: 16px;
}

.postTitle{
text-transform: uppercase;
letter-spacing: 1.5px;
font-weight: bold;
}

.postIntro{
text-align: left;
}

Answer 1

在您的 CSS 代码显示内联块的地方添加此规则。

vertical-align:top;

输出：

.frontPost{
    width: 250px;
    display: inline-block;
    margin-left: 5px;
    margin-top: 25px;
    margin-right: 5px;
    vertical-align:top;
}

这将使所有 div 对齐到父 div 的顶部。

有用link通读！ - http://css-tricks.com/almanac/properties/v/vertical-align/

Answer 2

使用垂直对齐怎么样属性。使用下面的代码 css

.crop {
width: 250px;
height: 150px;
overflow: hidden;
}

.frontPost{
vertical-align:top;
width: 250px;
display: inline-block;
margin-left: 5px;
margin-top: 25px;
margin-right: 5px;
}

.bigTxt{
letter-spacing: 10px;
font-size: 16px;
}

.postTitle{
text-transform: uppercase;
letter-spacing: 1.5px;
font-weight: bold;
}

.postIntro{
text-align: left;
}

希望对您有所帮助

将 div 个并排对齐

Align div's next to each other

html

css

php

wordpress

web