Question

我有一个包含3个元素的div（h2＆＃39; s）。 div是100％，但是当我将div中每个h2的宽度设置为33.33％时，第3个div将下降一行。 33％有效，但后来我留下了额外的空间，几乎无法察觉，但对我来说仍然是一个问题。我如何解决这个问题，以便3 h2适合100％div，以便第一个h2与左边对齐，第二个h2在中间，最后一个与右边对齐？甚至可能不必使用数字，例如33.33％？

这是我到目前为止所做的：

HTML：

<div class="col-md-12 bottomPadding">
   <h2 class="floatLeftBottom"><a href="/">Edit</a></h2>
   <h2 class="floatCenterBottom"><a href="/">Delete</a></h2>
   <h2 class="floatRightBottom"><a href="#">Move up</a></h2>
</div>

CSS：

.floatLeftBottom {
    display: inline-block;
    width: 33%;
    text-align: left;
    padding-bottom: 10px;
}

.floatCenterBottom {
    display: inline-block;
    width: 33%;
    text-align: center;
    padding-bottom: 10px;
}

.floatRightBottom {
    display: inline-block;
    width: 33%;
    text-align: right;
    padding-bottom: 10px;
}

picture

Answer 1

我建议学习使用flexbox。这真的是一个节省时间，并有一个非常好的浏览器支持

CSS：

.flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.item {
    padding-bottom: 10px;
}

HTML：

<div class="col-md-12 flex bottomPadding">
   <h2 class="item"><a href="/">Edit</a></h2>
   <h2 class="item"><a href="/">Delete</a></h2>
   <h2 class="item"><a href="#">Move up</a></h2>
</div>

Answer 2

有几种方法可以解决这个问题，我的偏好是使用flexbox来提供响应能力。

.bottomPadding {
  display: flex;
  width: 100%;
}

.floatLeftBottom,
.floatCenterBottom,
.floatRightBottom {
  width: calc(100% / 3);
}

.floatLeftBottom {
  text-align: left;
}
.floatCenterBottom {
  text-align: center;
}
.floatRightBottom {
  text-align: right;
}

<div class="col-md-12 bottomPadding">
  <h2 class="floatLeftBottom"><a href="/">Edit</a></h2>
  <h2 class="floatCenterBottom"><a href="/">Delete</a></h2>
  <h2 class="floatRightBottom"><a href="#">Move up</a></h2>
</div>

宽度为33.33％的3个元素超过100％？

2 个答案: