Question

我试图让蓝盒子的高度相等，无论它有多少内容。因此，我尝试将flex-grow用于蓝框。

请查看此code。我尝试使用短代码，flex: 1像其他问题一样，但它没有用。如何使蓝框等高？

HTML

<div class="practicespanel">
<div class="container">
<div class="practicecontent">
<h1>DUI Defense Attorney Douglas Herring</h1>
<p>Our very specialized firm dedicates itself to New Jersey DUI Defense. The Law Office of Douglas Herring is the New Jersey DUI Help Center.
DWI arrest is very serious in New Jersey. You are facing mandatory license suspensions, high monetary costs, increased penalties for years, and other extreme impacts on your life.  You need an experienced and successful DWI defense attorney. Let us take away your uncertainty and give you the defense you deserve. </p>
</div>
<div class="practiceicons">
<div class="practicerow">
<div class="column3">
<div class="hammericon practiceicon"></div>
<div class="criminalcontent">
<h3>First Offense DUI</h3>
<p>Your First Offense DUI can carry heavy penalties. Fees, classes, and possible jail time await first time offenders without a proper defense. </p>
<div><a href="/first-offense-dui/">- Read More -</a></div>
</div>
</div>
<div class="column3">
<div class="balenceicon practiceicon"></div>
<div class="criminalcontent">
<h3>Second Offense DUI</h3>
<p>Second Offense DUI holds serious penalties including mandatory jail time and ignition interlock. Your freedom depends on your defense.</p>
<div><a href="/second-offense-dui/">- Read More -</a></div>
</div>
</div>
<div class="column3">
<div class="documenticon practiceicon"></div>
<div class="criminalcontent">
<h3>Third Offense DUI</h3>
<p>Third Offense DUI means 180 days in jail, community service, Over $6000 in fees and incredible stress. Without a proper defense this offense could change your life forever.</p>
<div><a href="#">- read more -</a></div>
</div>
</div>
</div>
<div class="practicerow">
<div class="columns2">
<div class="columnright">
<div class="handicon practiceicon"></div>
<div class="criminalcontent">
<h3>Defense Report</h3>
<p>Find out what people are saying about our firm, see our testimonials and results. See what the DUI Help Center has done and how it can help you.</p>
<div><a href="#">- read more -</a></div>
</div>
</div>
</div>
<div class="columns2">
<div class="columnleft">
<div class="caricon practiceicon"></div>
<div class="criminalcontent">
<h3>DUI Defense Blog</h3>
<p>Your source for up to date DUI Defense News, Law Updates, and DUI Help Center Announcements.</p>
<div><a href="#">- read more -</a></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

CSS

.practicespanel {
  position: relative;
  display: block;
  width: 100%;
}
.container { 
  width: 90%;
  margin: 0 auto;
}
.practicecontent {
  width: 100%;
  text-align: center;
}
.practiceicons {
  width: 100%;
  display: block;
  position: relative;
}
.practicerow {
  width: 100%;
  display: flex;
  position: relative;
}
.column3 {
  display: flex;
  width: 33.3%;
  width: calc(100% / 3);
  text-align: center;
  position: relative;
  padding: 0 50px;
}
.columns2 {
  display: inline-block;
  width: 50%;
  padding: 0 50px;
  text-align: center;
}
.criminalcontent {
display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  position: relative;
  width: 100%;
}
.criminalcontent p {
  background-color: blue;
  color: #fff;
  display: block;
  width: 100%;
  position: relative;
  /*min-height: 70px;*/
  flex-grow: 1;
}

.columnright {
  float: right;
  width: 300px;
  position: relative;
  display: flex;
  padding: 0 40px 0 0;
  box-sizing: border-box;
}
.columnright:after {
  content: "";
  clear: both;
}
.columnleft {
  width: 300px;
  position: relative;
  display: flex;
  padding: 0 0 0 40px;
  box-sizing: border-box;
}

Answer 1

在您的代码中，无论内容大小如何，第一行中的蓝色框都具有相同的高度。尝试将内容添加到任何第一行框：http://jsfiddle.net/hLr0ecye/

在第二行中，您需要进行一次调整：

在.columns2中，而不是display: inline-block使用display: flex。

.columns2 {
    /* display: inline-block; */
    display: flex; /* NEW */
    justify-content: center; /* NEW; optional center alignment; just for demo */
    width: 50%;
    padding: 0 50px;    
    text-align: center;
}

DEMO：http://jsfiddle.net/hLr0ecye/1/
你的笔：http://codepen.io/anon/pen/WQZbqJ

注意：第一行和第二行具有不同的Flex容器。因此第一行中的蓝色框共享相同的高度，第二行中的蓝色框共享相同的高度。但是两行中的框不能共享相同的高度，因为它们不是同一个Flex容器中的兄弟。如果你想让它们共享相同的高度，你应该将它们放在一个flex容器中。考虑将display: flex应用于以下两者的父元素：.practiceicons。

试图使弹性物品具有相同的高度但柔韧增长是不起作用的

1 个答案: