时间戳

首页 > 解决方案 > 保持项目在拉伸的 div 内对齐

css - 保持项目在拉伸的 div 内对齐

问题描述

我试图让 div 大小相同，每个内容中的一些内容对齐，但长度不同。

我希望图标和文本在所有 div 上保持相同的位置，但让 div 在底部拉伸，因此它们的大小相同。

这是我的代码：

.servicescontainer {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  background-color: white;
  border-radius: 30px;
  padding: 20px;
  box-shadow: 3px 3px 20px #333;
  min-height: 240px;
}
.servicesicon {
  width: 50px;
  margin-left: auto;
    margin-right: auto;
  margin-top: 20px;
  }
  
.servicestext {
  width: 100%;
  text-align: center;
  position: relative;
  padding-right: 10px;
}
<div class="servicescontainer">
    <div class="servicesicon">
         <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg">
</svg>
    </div>
    <div class="servicestext">
        <h4>
      Repairs
    </h4>
        <ul>
            <li>Custom Replacement Parts</li>
            <li>Hydraulic Cylinder Repair & Refurbish</li>
            <li>Heavy Equipment Repair & Modification</li>
        </ul>
    </div>
</div>

<div class="servicescontainer">
    <div class="servicesicon">
         <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg">
</svg>
    </div>
    <div class="servicestext">
        <h4>
      Welding & Fabrication
    </h4>
        <ul>
            <li>Certified Steel, Aluminum & Stainless Welding</li>
            <li>Structural Fabrication & Assembly</li>
            <li>Metal Forming & Cutting</li>
          <li>Onsite Portable Services</li>
        </ul>
    </div>
</div>

我试过使用 position: relative 和 position: absolute 没有运气。我尝试过使用 min-height 但它会拉伸文本并且 h4 标题最终没有正确对齐。（为了清洁而删除了svg）

这是我尝试做的前后

标签： cssflexbox

解决方案

你可以这样做：

#container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.box {
  border: 2px solid black;
  width: 25%;
  padding: 1%;
  margin: 1%;
} 
<div id="container">
  <div class="box">
    <h4>Animals</h4>
    <ul>
      <li>Aardvark</li>
      <li>Badger</li>
      <li>Cougar</li>
    </ul>
  </div>
  <div class="box">
    <h4>Fruit</h4>
    <ul>
      <li>Apricot</li>
      <li>Banana</li>
      <li>Cherry</li>
      <li>Date</li>
      <li>Elderberry</li>
      <li>Fig</li>
    </ul>
  </div>
  <div class="box">
    <h4>Trees</h4>
    <ul>
      <li>Sycamore</li>
    </ul>
  </div> 
  <div class="box">
    <h4>Fruit</h4>
    <ul>
      <li>Apricot</li>
      <li>Banana</li>
      <li>Cherry</li>
      <li>Date</li>
      <li>Elderberry</li>
      <li>Fig</li>
      <li>Grapefruit</li>
      <li>Hedgehog</li>
    </ul>
  </div>
  <div class="box">
    <h4>Trees</h4>
    <ul>
      <li>Sycamore</li>
    </ul>
  </div>   
  <div class="box">
    <h4>Animals</h4>
    <ul>
      <li>Aardvark</li>
      <li>Badger</li>
      <li>Cougar</li>
    </ul>
  </div>  
</div>

推荐阅读