HTML C flex属性混乱按钮高度？

发布时间：2024-06-10 08:03:11 所属栏目：资源来源：DaWei

导读： 我正在使用bootstrap并使用flex进行布局.

目前按钮正在占据容器的高度.文本下面有很多空间,我想删除i,当我向按钮添加填充时,它的大小会变得不均匀.我试图通过线高调整大小,但我试图找到

我正在使用bootstrap并使用flex进行布局.

目前按钮正在占据容器的高度.文本下面有很多空间,我想删除i,当我向按钮添加填充时,它的大小会变得不均匀.我试图通过线高调整大小,但我试图找到实际的解决方案和原因,为什么我有这个问题.

我在这里缺少任何与flex相关的东西,还是其他东西？

任何帮助将受到高度赞赏.

谢谢.

.vessel-card {

  display: flex;

  flex-direction: column;

}

.vessel-card h3 {

  margin: 0;

  padding: 20px 0;

}

.departure-card {

  display: flex;

  padding: 20px 0;

  border-top: 2px solid #888;

}

.departure-card p {

  margin-right: 10px;

}

.departure-card:last-child {

  border-bottom: 2px solid #888;

}

.departure-card .btn-explore {

  border: 1px solid #000;

  display: inline-block;

  text-transform: uppercase;

  color: #000;

  border-radius: 0;

}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">

  <div class="row">

    <div class="col-md-4 vessel-card">

      <a href="cienfuegos-from-havana.html" class="special-departure">

        <img src="http://placehold.it/350x150">

      </a>

      <h3>Vessel: Panorama</h3>

      <div class="departure-card">

        <p>Havana to Cienfuegos starting at $5,999</p>

        <a href="#" class="btn btn-explore">Explore</a>

      </div>

      <div class="departure-card">

        <p>Havana to Cienfuegos starting at $5,999</p>

        <a href="cienfuegos-from-havana.html" class="btn btn-explore">Explore</a>

      </div>

    </div>

  </div>

</div>

解决方法

Flexbox使物品的高度与您在此处看到的相同 Demo,但您可以使用 align-items来更改它或在您的情况下 Demo

.parent {

  align-items: center;

  display: flex;

}

.child {

  border: 1px solid black;

  margin: 5px;

}

.child:first-child {

  height: 100px;

}

<div class="parent">

  <div class="child">Child</div>

  <div class="child">Child</div>

</div>

（编辑：应用网_常德站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!