css 如何在不同的元素中拥有相同高度的子元素？

r1zhe5dt 于 2023-06-25 发布在其他

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

如果我想把class=a div和class=B div设置为相同的高度，内容就不一样了，高度需要自动适应内容，li也有相同的高度。我怎么写CSS？

<ul style="display:flex">
        <li>
          <div class="a">
            <h1>1</h1>
            <p>a...</p>
          </div>
          <div class="b">
            <h1>1</h1>
            <p>b...</p>
          </div>
        </li>
        <li>
          <div class="a">
            <h1>1</h1>
            <p>c...</p>
          </div>
          <div class="b">
            <h1>1</h1>
            <p>d...</p>
          </div>
        </li>
        <li>
          <div class="a">
            <h1>1</h1>
            <p>e...</p>
          </div>
          <div class="b">
            <h1>1</h1>
            <p>f...</p>
          </div>
        </li>
      </ul>

我已经将class=a div设置为相同的高度，但是当浏览器宽度变小时，内容就会溢出
This is the effect I want

css

来源：https://stackoverflow.com/questions/76522016/how-can-i-have-equal-height-children-element-in-the-different-elements

1条答案

按热度按时间

pobjuy321#

您应该使用<div class="a">而不是<div className="a">。
ClassName是Element的属性，您可以使用它来访问div属性“class”，但要从JavaScript访问。在HTML中，您只需设置“class”属性即可。你的例子是HTML的例子。
您可能会发现这些链接有助于理解class和className之间的区别：

https://www.w3schools.com/html/html_classes.asp
https://developer.mozilla.org/en-US/docs/Web/API/Element/className
举个小例子：

div {
width: 100px;
height: 100px;
background-color: yellow
}

.a {
  border: 1px solid red
}

<div classname="a">First box</div>
<br>
<div class="a">Second box</div>

赞(0）回复(0）举报 2023-06-25

我来回答

css 如何在不同的元素中拥有相同高度的子元素？

1条答案

相关问题

热门标签

最新问答