css 如何用颜色填充左边的类div？

66bbxpm5 于 2023-02-10 发布在其他

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

我需要。左类已经完全充满了红色，如果正确的类有内容在它。目前它没有完全填充颜色到左div？我相信问题是与高度？我该如何实现它？

.container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  border: 1px solid #bebebe;
  border-radius: 5px;
}

.left {
  background-color: red;
  padding: 0 8px;
  flex-grow: 1;
  display: flex;
}

.right {
  width: 100%;
  background-color: blue;
}

<div class="container">
  <div class="left">
    <input type="radio" />
  </div>
  <div class="right">
    <p>test2</p>
    <p>test2</p>
    <p>test2</p>
    <p>test2</p>
    <p>test2</p>
    <p>test2</p>
  </div>
</div>

css

来源：https://stackoverflow.com/questions/75367014/how-to-fill-left-class-div-with-color

1条答案

按热度按时间

eaf3rand1#

只需在.container中将align-items: center;更改为align-items: stretch;：

.container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center; /* <-- Change this */
  align-items: stretch;
  border: 1px solid #bebebe;
  border-radius: 5px;
}

.left {
  background-color: red;
  padding: 0 8px;
  flex-grow: 1;
  display: flex;
}

.right {
  width: 100%;
  background-color: blue;
}

<div class="container">
  <div class="left">
    <input type="radio" />
  </div>
  <div class="right">
    <p>test2</p>
    <p>test2</p>
    <p>test2</p>
    <p>test2</p>
    <p>test2</p>
    <p>test2</p>
  </div>
</div>

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

我来回答

css 如何用颜色填充左边的类div？

1条答案

相关问题

热门标签

最新问答