如何对齐这些元素?.CSS - How can align these elements?CSS

我有这个链接：

链接

在底部，您会发现一些未按我想要对齐的产品。

我放一张图片更清楚地了解他们想要如何对齐

http://i59.tinypic.com/1zfh0dc.jpg

代码 PHP：

<div class="container">
                <?php
                    $args = array(
                      'post_type' => 'product',
                                      'posts_per_page' => 6,
                      );
                    $products = new WP_Query( $args );
                    if( $products->have_posts() ) {
                      while( $products->have_posts() ) {
                        $products->the_post();
                        ?>
                        <?php
                            $check = get_field('featured_product');
                            if($check[0] == 'Check'){ ?>
                                <div class="featured_product">
                                    <?php the_post_thumbnail('featured'); ?>
                                    <div class="featured_content center">
                                        <h3><?php the_title() ?></h3>
                                        <div class='content'>
                                            <?php the_excerpt() ?>
                                        </div>
                                        <a href="?page_id=26" class="get_quote">get quote</a>
                                    </div>
                                </div>
                            <?php } ?>
                        <?php
                      }
                    }
                    else {
                      echo 'No products!';
                    }
                  ?>
                </div>
            </div>

代码 CSS：

.featured_product{
  width:28%;
  float:left;
  max-width:300px;
  min-width:300px;
  margin-right:6%;
  border:3px solid #d3d1d1;
  margin-bottom:30px;
  border-radius:0 0 20px 20px;
  padding-bottom:30px;
height:468px;
}

我试图进行这些更改，但仍然没有按预期对齐。

.featured_content{
  padding:0 30px;
  position: absolute;
  bottom: 0;
}

.featured_product{position:relative;}

无论添加多少内容，都必须始终如一地排列。如您所见，没有图像或长文本的产品无法正确显示。

你能帮我找到解决这个问题的方法吗？

提前感谢！

您可以使用绝对位置并将.featured_content的box-sizing设置为border-box，以使其正确呈现。试试这个：

.featured_product {
  position: relative;
}
.featured_content {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding:0 30px;
  position: absolute;
  bottom: 30px;
  left: 0;
}

编辑

如果要使标题和内容对齐，引用按钮对齐相同，则需要用div包裹图像，并向该div添加静态高度。同时包装get_quote按钮并将包装器设置为绝对位置。例：

.HTML

<div class="featured_product">
  <div class="image">
    <img>
  </div>
  <div class="featured_content">
    <h3></h3>
    <p class="content"></p>
  </div>
  <div class="get_quote_wrap">
    <a class="get_quote"></a>
  </div>
</div>

.CSS

.featured_product {
  position: relative;
}
.featured_product .image {
  height: 200px;
  margin-bottom: 20px;
}
.featured_product .get_quote_wrap {
  display: block;
  width: 100%;
  box-sizing: border-box;
  position: absolute;
  bottom: 30px;
  left: 0;
  text-align: center;
}

如果您正在寻找一个简单的答案，那么您可以使用 imgdiv，您可以在其中放置图像或提供最小高度。在您的示例中，我添加了这个，还可以

<div style="min-height:200px;"></div>

您可以在父类中使用它，以将所有内容放在中心

display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;

如果

.featured_content类前面没有 img 标记，则为该类提供边距顶部

.featured_content{margin-top:220px}
img.attachment-featured ~ div.featured_content{margin-top:0;}

http://www.w3schools.com/cssref/css_selectors.asp

您所需要的只是.contentdiv应该具有最小高度，因此，Get Quote应该相应地垂直对齐。

应用此样式规则：

.content {min-height: 165px;}

相应地调整高度。

添加

position: relative;
text-align: center;

在你的

.featured_product{}

和

position: absolute;
bottom: /* your offset */;

在

.featured_content{}

位置相对不能浮动，只需在其周围放置一个div并使其向左浮动即可。