Question

我有这个链接：

在底部，你会发现一些产品没有按照我想要的方式对齐。

我更清楚地了解了他们想要如何对齐

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>

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

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

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

提前致谢！

Answer 1

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

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按钮并将包装器设置为绝对位置。例如：

<强> HTML

get_quote

<强> CSS

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

Answer 2

如果您正在寻找一个简单的答案，那么您可以使用img div，您可以放置图像，也可以给出最小高度。在你的例子中，我添加了这个，没关系

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

Answer 3

您可以在父类中使用它，以获得所有中心

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

Answer 4

为.featured_content课程提供一个上边距如果前面没有img标记

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

WireShark

Answer 5

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

应用此样式规则：

.content {min-height: 165px;}

相应地调整高度。

Answer 6

添加

position: relative;
text-align: center;

进入你的

.featured_product{}

和

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

在

.featured_content{}

位置相对不能浮动只是在它周围放一个div并让它向左浮动。

如何对齐这些元素？CSS

6 个答案: