如何对齐这些元素？CSS答案

【问题标题】：How can align these elements?CSS如何对齐这些元素？CSS
【发布时间】：2015-06-18 12:29:05
【问题描述】：

我有这个链接：

在底部你会发现一些产品没有按照我的意愿对齐。

我放一张图比较清楚明白他们想怎么对齐

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

无论添加多少内容，都必须保持一致。如您所见，没有图片或长文本的产品无法正常显示。

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

提前致谢！

【问题讨论】：

我认为您需要使用fixed height 进行这种对齐。
你为什么不找另一张图片并用它填满空间呢？ - 比没有图片更好看
如果您需要较少的 css，请查看我的答案

标签： php html css wordpress

【解决方案1】：

您可以使用绝对位置并将.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;
}

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

你可以在父类中使用它，让一切都在中心

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

【讨论】：

【解决方案4】：

给.featured_content 类一个margin-top 如果它前面没有img标签

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

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

【讨论】：

【解决方案5】：

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

应用此样式规则：

.content {min-height: 165px;}

相应地调整高度。

【讨论】：

【解决方案6】：

添加

position: relative;
text-align: center;

进入你的

.featured_product{}

和

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

在

.featured_content{}

position relative 不能浮动，只需在其周围放置一个 div 并使其向左浮动。

【讨论】：