Box Html Css Fix for Noob

Question

对不起。 我是新来的，我只是被卡在其中。

我在图片和CSS的代码上附加了一个Web链接。

一切都一样。 除非标签为单行，否则框会缩小。 我已经为其设置了固定的宽度和高度，但是仍然无法正常工作。

.product-box {
  background: #fff;
  padding: .5rem;
  border-radius: 4px;
  box-shadow: 0 2px 10px #dcdcdc;
  cursor: pointer;
  display: inline-block;
  border-radius: 10px !important;
  margin: 15px;
  width: 100px;
  height: 150px;
}

.product-image {
  height: 100px;
  width: 80px;
  padding-left: 10px;
}

.product-label {
  width: 80px;
  padding-left: 11px;
  height: 50px;
  cursor: pointer;
}

.product-label-style {
  cursor: pointer;
  font-family: Rubik-Medium;
  color: $app-greyish-brown;
  font-weight: bold;
}

<div class="product-box" ng-click='ctrl.productClick()'>
  <div class="product-image" ng-transclude>
  </div>
  <div class="product-label">
    <label class="product-label-style">Commercial Vehicles</label>
  </div>
</div>

<div class="product-box" ng-click='ctrl.productClick()'>
  <div class="product-image" ng-transclude>
  </div>
  <div class="product-label">
    <label class="product-label-style">Vehicles</label>
  </div>
</div>

Answer 1

将那些“ .product-box”包装到div中，让我们将其命名为.wrapper，然后：

<div class="wrapper">
  <div class="product-box" ng-click='ctrl.productClick()'>
  ...
  </div>
  <div class="product-box" ng-click='ctrl.productClick()'>
  ...
  </div>
</div>

.wrapper {
  display: flex;
  align-items: flex-start;
}

Answer 2

.product-label {
  width: 80px;
  padding-left: 11px;
  height: 50px;
  cursor: pointer;
  overflow: hidden;
}

嗨， 感谢您的帮助。

我从我的一个朋友那里找到了解决方案。 隐藏了溢出！