相对于高度对齐CSS中的元素

bogh5gae 于 2023-02-26 发布在其他

关注(0)|答案(1)|浏览(147)

My Elements
你好，
我正在学习在WordPress中用CSS制作模板。我想对齐元素，使它们在高度上相等。
我在模板中找到了相应的代码，但这些块不响应任何命令。

`.cms-cmsservice-grid1 .grid-item-inner {
    background-color: #00257A !important;
    color:#fff !important;
    min-height: 355px;
    vertical-align: baseline;
    vertical-align:stretch !important;
     align-items: stretch;
     }`

我唯一发现的是手动输入高度到355PX，但之后只在电脑上看起来不错，在其他线条较多的设备上（所以区块较长）仍然参差不齐。
我知道你们是Maven，告诉我怎样才能对齐它，使高度调整到最长的块？

css

来源：https://stackoverflow.com/questions/75544192/aligning-elements-in-css-relative-to-height

1条答案

按热度按时间

wqnecbli1#

等高+等宽立柱

将display：flex添加到父项，将flex：1添加到框中

.paddingBlock {
    padding: 20px 0;
}

.eqWrap {
    display: flex;
}

.eq {
    padding: 10px;
}

.eq:nth-of-type(odd) {
    background: yellow;
}

.eq:nth-of-type(even) {
    background: lightblue;
}

.equalHW {
    flex: 1;
}

<div class="paddingBlock">
  <h1>EQUAL HEIGHT + WIDTH COLUMNS</h1>
  <p>Add display:flex to the parent and flex:1 to the boxes</p>
  <div class="equalHWrap eqWrap">
    <div class="equalHW eq">boo <br> boo</div>
    <div class="equalHW eq">shoo</div>
    <div class="equalHW eq">clue</div>
  </div>
</div>

赞(0）回复(0）举报 2023-02-26

我来回答

相对于高度对齐CSS中的元素

1条答案

等高+等宽立柱

相关问题

热门标签

最新问答