html - 显示 flex 不拉伸(stretch) div

Question

我使用了 CSS 属性 display: flex。我的内容 div 不相等。

现在看起来像:

我想让它看起来像这样:

HTML

 <div class="poplar-boxes">

    <div class="popular-boxes-devider"></div> 

 </div>

 <div class="poplar-boxes">

    <div class="popular-boxes-devider">

 </div>

CSS

.poplar-boxes {
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
   align-items: stretch;
}

.popular-boxes-devider {
    flex-basis: 30%
}

Here是一个 JS fiddle

Answer 1

您的 flex 元素高度相同(popular-boxes-devider)。问题是您将边框设置为高度不相等的 .info。

诀窍是让它们相等。您需要根据它们的边距顶部、填充和它们上方圆圈的高度来计算它们的高度

请看下面的片段

/* Added styles */

.effect2,
.icon {
  height: 100%;
}

.info {
  height: calc(100% - 72px);
  box-sizing: border-box;
}

.popular-boxes-devider {
  margin-bottom: 15px;
}


/* end Added styles */

.poplar-boxes {
  min-height: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.popular-boxes-devider {
  flex-basis: 30%;
}

.box > .icon {
  text-align: center;
  position: relative;
  background: #fff;
}

.box > .icon > .image {
  position: relative;
  z-index: 2;
  margin: auto;
  width: 88px;
  height: 88px;
  border: 4px solid white;
  line-height: 88px;
  border-radius: 50%;
  background: #2c2c2c;
  vertical-align: middle;
}

.box > .icon:hover > .image {
  background: #6CB4C4;
}

.box > .icon > .image > i {
  font-size: 36px !important;
  color: #fff !important;
}

.box > .icon:hover > .image > i {
  color: white !important;
}

.box > .icon > .info {
  margin-top: -24px;
  background: rgba(44, 44, 44, 0.09);
  border: 1px solid #2c2c2c;
  padding: 15px 0 10px 0;
}

.box > .icon:hover > .info {
  background: rgba(0, 0, 0, 0.04);
  border-color: #e0e0e0;
  color: white;
}

.box > .icon > .info > h3.title {
  font-size: 21px;
  font-family: "Quicksand", sans-serif !important;
  font-size: 28px;
  color: #222;
  font-weight: 500;
  padding-top: 14px;
}

.box > .icon > .info > p {
  font-size: 15px;
  color: #666;
  line-height: 1.5em;
  margin: 20px 10px;
  text-align: justify;
}

.box > .icon > .info > .more a {
  font-family: "Quicksand", sans-serif !important;
  font-size: 12px;
  color: #222;
  line-height: 12px;
  text-transform: uppercase;
  text-decoration: none;
}

.box > .icon:hover > .info > .more > a {
  color: #fff;
  padding: 6px 8px;
  background-color: #63B76C;
}


/* .box .space { height: 2px; background-color: #2c2c2c;} */

.btn-default {
  font-family: "Quicksand", sans-serif;
  background-color: #75b1ae;
  color: #FFFFFF;
}

.btn-default:hover {
  background-color: #FFFFFF;
  color: black;
}

.box .image img {
  width: 58%;
  /* vertical-align: sub; */
}


/*==================================================
 * Effect 2
 * ===============================================*/

.effect2 {
  position: relative;
}

.effect2:before,
.effect2:after {
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 13px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width: 300px;
  background: #777;
  box-shadow: 0 15px 10px #777;
  transform: rotate(-3deg);
}

.effect2:after {
  transform: rotate(3deg);
  right: 10px;
  left: auto;
}

<div class="poplar-boxes">
  <div class="popular-boxes-devider">
    <div class="effect2 box">
      <div class="icon">
        <div class="image"><img src="images/icon/startup-registration.png" /></div>
        <div class="info">
          <h3 class="title">Startup Registration</h3>
          <p>
            SetyourBiz is a leading business set­up services provider in India with 4% market share in highly unorganized sector of small scale consultants.
          </p>

        </div>
      </div>
      <div class="space"></div>
    </div>
  </div>


  <div class="popular-boxes-devider">
    <div class="effect2 box">
      <div class="icon">
        <div class="image"><img src="images/icon/foreign-investment.png" /></div>
        <div class="info">
          <h3 class="title">Foreign Investment (FDI)</h3>
          <p>
            Foreign investment is regulated by FEMA act, RBI circulars. Our expert advise and prompt services has what made us a renowned face in such sectors.
          </p>

        </div>
      </div>
      <div class="space"></div>
    </div>
  </div>


  <div class="popular-boxes-devider">
    <div class="effect2 box">
      <div class="icon">
        <div class="image"><img src="images/icon/licensing-and-registrations.png" /></div>
        <div class="info">
          <h3 class="title">Licensing & Registrations</h3>
          <p>
            It is imperative and mandatory for a start up as well as established business to obtain required licenses in order to legally operate.
          </p>

        </div>
      </div>
      <div class="space"></div>
    </div>
  </div>


  <div class="popular-boxes-devider">
    <div class="effect2 box">
      <div class="icon">
        <div class="image"><img src="images/icon/intellectual-property-rights.png" /></div>
        <div class="info">
          <h3 class="title">Intellectual Property Rights</h3>
          <p>
            Every business, invention, original creative work and design needs to be legally protected to claim the owner's right and safeguard it from infringement
          </p>

        </div>
      </div>
      <div class="space"></div>
    </div>
  </div>



  <div class="popular-boxes-devider">
    <div class="effect2 box">
      <div class="icon">
        <div class="image"><img src="images/icon/accounting-and-tax.png" /></div>
        <div class="info">
          <h3 class="title">Accounting & tax</h3>
          <p>
            Accounting and taxes may be complex for you but it is simple for our expert team of CAs.
          </p>

        </div>
      </div>
      <div class="space"></div>
    </div>
  </div>


  <div class="popular-boxes-devider">
    <div class="effect2 box">
      <div class="icon">
        <div class="image"><img src="images/icon/secretarial-services.png" /></div>
        <div class="info">
          <h3 class="title">Secretarial Services</h3>
          <p>
            Corporate and economic laws may be cumbursome but not for our team of CS, experience excellence here.
          </p>

        </div>
      </div>
      <div class="space"></div>
    </div>
  </div>



  <div class="popular-boxes-devider">
    <div class="effect2 box">
      <div class="icon">
        <div class="image"><img src="images/icon/hr-and-legal.png" /></div>
        <div class="info">
          <h3 class="title">Legal Services</h3>
          <p>
            Reply to notices like IP Violation Notice, cheque bounce notice, NRI, Immigration Services and Drafting of Legal Documents, Agreements like vendor engagement agreement, confidentiality.
          </p>

        </div>
      </div>
      <div class="space"></div>
    </div>
  </div>

  <div class="popular-boxes-devider">
    <div class="effect2 box">
      <div class="icon">
        <div class="image"><img src="images/icon/hr-and-legal.png" /></div>
        <div class="info">
          <h3 class="title">Labour Laws & Payroll</h3>
          <p>
            Registration with Labour Department, Creation of PF / ESIC accounts and payment of dues for employees and monthly compliance of TDS are necessary compliance, rest assured with a fee of Rs. 250 per employees.
          </p>

        </div>
      </div>
      <div class="space"></div>
    </div>
  </div>


  <div class="popular-boxes-devider">
    <div class="effect2 box">
      <div class="icon">
        <div class="image"><img src="images/icon/funding-and-restructuring.png" /></div>
        <div class="info">
          <h3 class="title">Funding & Restructuring</h3>
          <p>
            Registration with Labour Department, Creation of PF / ESIC accounts and payment of dues for employees and monthly compliance of TDS are necessary compliance, rest assured with a fee of Rs. 250 per employees.
          </p>

        </div>
      </div>
      <div class="space"></div>
    </div>
  </div>

</div>