Question

我在引导程序中将缩略图放在缩略图下方时遇到问题。下图显示了三个缩略图，下方有一个按钮。按钮不是垂直对齐的，因为三个不同缩略图之间出现的文本和按钮具有不同的长度。 current display 这是我的代码：

<div class="col-md-3">
    <div class="thumbnail" style="height: 400px;">
        <img style="width: 200px; height: 200px;" src="<?php echo base_url();?>assets/user_file/product/<?php echo $row->foto; ?>">
        <div class="caption">
            <center>
                <h3><?php echo $row->nama_prod; ?></h3>
                <strong><p>Rp.<?php echo $row->harga; ?>.-</p></strong>
                <a href="<?php echo base_url()?>/index.php/pesanan/pesan?id_product=<?php echo $row->id_product?>" class="btn btn-success"> Pesan</a>
            </center>
        </div>
    </div>
</div>

我该如何解决这个问题？

Answer 1

希望这可能有所帮助：

将缩略图类设为相对position:relative;，然后将position:absolute; top:auto; bottom:0;添加到<a>代码

Answer 2

将图片和标题保存在一行，将链接按钮保存在另一行，如下所示：

<div class="col-md-3 text-center">
  <div class="thumbnail" style="height: 400px;">
    <div class="row">
      <img style="width: 200px; height: 200px;" src="<?php echo base_url();?>assets/user_file/product/<?php echo $row->foto; ?>">
      <div class="caption" style="height: 140px;">
          <h3><?php echo $row->nama_prod; ?></h3>
          <strong><p>Rp.<?php echo $row->harga; ?>.-</p></strong>
      </div>
    </div>
    <div class="row">
          <a href="<?php echo base_url()?>/index.php/pesanan/pesan?id_product=<?php echo $row->id_product?>" class="btn btn-success"> Pesan</a>
    </div>
  </div>
</div>

设置＆＃34;文本中心＆＃34;列内部对齐的属性。和div类＆＃34;标题＆＃34;应该有高度风格。

Answer 3

一种方法是使用这样的两行。

<div class="row">
    <div class="col-md-3">
        <div class="thumbnail" style="height: 400px;">
            <img style="width: 200px; height: 200px;" src="<?php echo base_url();?>assets/user_file/product/<?php echo $row->foto; ?>">
            <div class="caption">
                <center>
                    <h3><?php echo $row->nama_prod; ?></h3>
                    <strong><p>Rp.<?php echo $row->harga; ?>.-</p></strong>
                </center>
            </div>
        </div>
    </div>
    <div class="col-md-3">...</div>
    <div class="col-md-3">...</div>
</div>
<div class="row">
    <div class="col-md-3">
        <a href="<?php echo base_url()?>/index.php/pesanan/pesan?id_product=<?php echo $row->id_product?>" class="btn btn-success"> Pesan</a>
    </div>
    <div class="col-md-3">...</div>
    <div class="col-md-3">...</div>
</div>

P.S：center标记已弃用。不要使用它。 Why is the <center> tag deprecated in HTML?

如何使用自举网格系统垂直对齐不同长度文本下方的按钮？

3 个答案: