css - 将 div 的高度设置为波旁威士忌的外容器

Question

我是一个整洁的新手。我有一个外容器和 2 个内容器。一个是左容器，一个是右容器。右边的容器比左边的容器有更多的文本，所以高度会自动扩展。左侧容器的内容较少，因此它的高度与另一个容器不匹配。如何设置左边容器的高度等于右边容器的高度？这是我的形象。

这是代码

  .mainContainer
{

@include outer-container;



}
.rightcontainer
{
    padding:10px;
background-color:orange;

            @include media($mobile) { 
            @include span-columns(10 of 10)
        }

        @include media($tablet) { 
            @include span-columns(5 of 10)
        }

        @include media($laptop) { 
            @include span-columns(5 of 10)
        }

        @include media($large-desktop) { 
            @include span-columns(5 of 10)
        }

}
.leftcontainer

{
    padding:10px;

background-color:silver;
            @include media($mobile) { 
            @include span-columns(10 of 10)
        }

        @include media($tablet) { 
            @include span-columns(5 of 10)
        }

        @include media($laptop) { 
            @include span-columns(5 of 10)
        }

        @include media($large-desktop) { 
            @include span-columns(5 of 10)
        }

}

谢谢既然 neat 有它自己的设置，请告诉我如何在 neat 中做？

Answer 1

让它们成为 display: table-cell 元素，它们会自动适应彼此的高度。

.left, .right {
  display: table-cell;
  border: 1px solid red;
  width: 50%;
}

<div class="left">
  text text text text text text text text text text text text text text text text text text text text 
</div>

<div class="right">
  text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text 
</div>