如何调整 col 到 row？

Question

我在一个页面中有一个网格系统，我希望一行中有 2 个列。列比行大。

示例：如果行的高度为 20 像素，列也是如此。

我想让列适应行，而不是独立行动。

<!--HTML-->
<div class="container-fluid">
      <div class="row">
        <div class="col-4"><img src="https://www.w3schools.com/images/w3schools_green.jpg"></div>
        <div class="col-8">
              dhfjk
              <br>fudff
              <br>udfhjdkl
        </div>
      </div>
</div>

/*CSS*/
.col-4{
    text-align: center; 
    padding: 0%;
}

.col-4{
    border: 3px red solid;
}

.col-8{
    border: 3px blue solid;
}

.container-fluid{
    padding: 50px;
}

.row{
    border: 5px solid green;
    max-height: 50px;
}

Answer 1

您已将 max-height:50 指定给 row，删除 cols 将等于 row ！

/*CSS*/
.col-4{
    text-align: center; 
    padding: 0%;
}

.col-4{
    border: 3px red solid;
}

.col-8{
    border: 3px blue solid;
}

.container-fluid{
    padding: 50px;
}

.row{
    border: 5px solid green;
    
}

<!--HTML-->
<div class="container-fluid">
      <div class="row">
        <div class="col-4"><img src="https://www.w3schools.com/images/w3schools_green.jpg"></div>
        <div class="col-8">
              dhfjk
              <br>fudff
              <br>udfhjdkl
        </div>
      </div>
</div>

Answer 2

也许可以帮到你

.col-4 {
    text-align: center; 
    padding: 0%;
    max-height: -webkit-fill-available;
     border: 3px red solid;
}

.col-8{
    border: 3px blue solid;
    max-height: -webkit-fill-available;
    overflow: scroll;
}

.container-fluid{
    padding: 50px;
}

.row {
    border: 5px solid green;
    max-height: 50px;
}

.row:nth-of-type(2){
   max-height: -webkit-fill-available;
    overflow: scroll
}

img{
    max-height: inherit;
}

Answer 3

就用这个css

/*CSS*/
.col-4{
    text-align: center; 
    padding: 0%;
}

.col-4{
    border: 3px red solid;
     padding: 7px;
}

.col-8{
    border: 3px blue solid;
}

.container-fluid{
    padding: 50px;
}

.row{
    border: 5px solid green;
    max-height: 200px;
}

如何调整 col 到 row？

How to adjust col to row?

html

css

grid-system

bootstrap-4