Как настроить col для строки? - PullRequest
Новая
       22

Как настроить col для строки?

0 голосов
/ 08 мая 2019

У меня есть сеточная система на странице, где я хочу, чтобы в строке было 2 столбца.Столбцы больше, чем строка.

JSFIDDLE

Пример: если строка имеет высоту 20px, то столбцы тоже.

Я хочу, чтобы cols приспосабливались к строке, а не действовали независимо. 

<!--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;
}

Ответы [ 3 ]

0 голосов
/ 08 мая 2019

может быть, это может помочь вам 

.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;
}
0 голосов
/ 08 мая 2019

просто используйте эту 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;
}
0 голосов
/ 08 мая 2019

Вы дали max-height:50 для строки, уберите, что столбцы будут равны строке! 

/*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>
...