html – 无论内容长度如何,相等宽度的d性项目

概述参见英文答案 > Equal width flex items even after they wrap                                    2个 我下面的代码中的flexbox看起来很棒,但我很困惑如何确定盒子的宽度. 例如,如果删除< p>中写入的内容或class =“card_title”元素,框的大小也会发生变化. 有没有办法将所有框设置为相同的宽度,无论 参见英文答案 > Equal width flex items even after they wrap                                    2个
我下面的代码中的flexBox看起来很棒,但我很困惑如何确定盒子的宽度.

例如,如果删除< p>中写入的内容或class =“card_Title”元素,框的大小也会发生变化.

有没有办法将所有框设置为相同的宽度,无论标题或段落的长度如何？

codepen demo

img {  height: auto;  max-wIDth: 100%;  vertical-align: mIDdle;}.btn {  background-color: white;  border: 1px solID #cccccc;  color: #696969;  padding: 0.5rem;  text-transform: uppercase;}.btn--block {  display: block;  wIDth: 100%;}.cards {  display: -webkit-Box;  display: -webkit-flex;  display: -ms-flexBox;  display: flex;  -webkit-flex-wrap: wrap;  -ms-flex-wrap: wrap;  flex-wrap: wrap;  List-style: none;  margin: 0;  padding: 0;}.cards__item {  display: -webkit-Box;  display: -webkit-flex;  display: -ms-flexBox;  display: flex;  padding: 1rem;}@media (min-wIDth: 40rem) {  .cards__item {    wIDth: 50%;  }}@media (min-wIDth: 56rem) {  .cards__item {    wIDth: 33.3333%;  }}.card {  background-color: white;  border-radius: 0.25rem;  Box-shadow: 0 20px 40px -14px rgba(0,0.25);  display: -webkit-Box;  display: -webkit-flex;  display: -ms-flexBox;  display: flex;  -webkit-Box-orIEnt: vertical;  -webkit-Box-direction: normal;  -webkit-flex-direction: column;  -ms-flex-direction: column;  flex-direction: column;  overflow: hIDden;}.card:hover .card__image {  -webkit-filter: contrast(100%);  filter: contrast(100%);}.card__content {  display: -webkit-Box;  display: -webkit-flex;  display: -ms-flexBox;  display: flex;  -webkit-Box-flex: 1;  -webkit-flex: 1 1 auto;  -ms-flex: 1 1 auto;  flex: 1 1 auto;  -webkit-Box-orIEnt: vertical;  -webkit-Box-direction: normal;  -webkit-flex-direction: column;  -ms-flex-direction: column;  flex-direction: column;  padding: 1rem;}.card__image {  background-position: center center;  background-repeat: no-repeat;  background-size: cover;  border-top-left-radius: 0.25rem;  border-top-right-radius: 0.25rem;  -webkit-filter: contrast(70%);  filter: contrast(70%);  overflow: hIDden;  position: relative;  -webkit-Transition: -webkit-filter 0.5s cubic-bezIEr(0.43,0.41,0.22,0.91);  Transition: -webkit-filter 0.5s cubic-bezIEr(0.43,0.91);  Transition: filter 0.5s cubic-bezIEr(0.43,0.91),-webkit-filter 0.5s cubic-bezIEr(0.43,0.91);}.card__image::before {  content: "";  display: block;  padding-top: 56.25%;}@media (min-wIDth: 40rem) {  .card__image::before {    padding-top: 66.6%;  }}.card__image--wedding {  background-image: url(wedding2.png);}.card__image--baby {  background-image: url(baby2.png);}.card__image--moving {  background-image: url(moving2.png);}.card__image--graduation {  background-image: url(graduation2.png);}.card__image--retirement {  background-image: url(retirement2.png);}.card__image--award {  background-image: url(trophy2.png);}.card__Title {  color: #696969;  Font-size: 1.25rem;  Font-weight: 300;  letter-spacing: 2px;  text-transform: uppercase;}.card__text {  -webkit-Box-flex: 1;  -webkit-flex: 1 1 auto;  -ms-flex: 1 1 auto;  flex: 1 1 auto;  Font-size: 0.875rem;  line-height: 1.5;  margin-bottom: 1.25rem;}

<div >  <hr ></hr>  <div ></div>  <h2 >Moments That Matter</h2>  <ul >    <li >      <div >        <div ></div>        <div >          <div >Getting MarrIEd</div>          <p ></p>          <button >Let's Go</button>        </div>      </div>    </li>    <li >      <div >        <div ></div>        <div >          <div >Growing Your Family</div>          <p ></p>          <button >Let's Go</button>        </div>      </div>    </li>    <li >      <div >        <div ></div>        <div >          <div >Moving to a New Home</div>          <p ></p>          <button >Let's Go</button>        </div>      </div>    </li>    <li >      <div >        <div ></div>        <div >          <div >Requesting Tuition Reimbursement</div>          <p ></p>          <button >Let's Go</button>        </div>      </div>    </li>    <li >      <div >        <div ></div>        <div >          <div >Preparing for Retirement/Separation</div>          <p ></p>          <button >Let's Go</button>        </div>      </div>    </li>    <li >      <div >        <div ></div>        <div >          <div >Awarding an Employee</div>          <p ></p>          <button >Let's Go</button>        </div>      </div>    </li>  </ul></div>

解决方法

Is there a way to set all the Boxes to be the same wIDth regardless of the lengths of the Titles or paragraphs?

您目前在卡元素上没有定义的宽度.这意味着每个元素的宽度将由其内容(.card_image,.card_content .card_Title等)设置.

如果您希望这些元素的宽度均匀并固定,请为它们指定宽度.试试这个：

.card { flex: 0 0 100%; } /* don't grow,don't shrink,take full wIDth of parent */

revised codepen

总结

以上是内存溢出为你收集整理的html – 无论内容长度如何,相等宽度的d性项目全部内容，希望文章能够帮你解决html – 无论内容长度如何,相等宽度的d性项目所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。