Question

我是一个整洁的新手。我有一个外容器和2个内容器。一个是左侧容器，一个是右侧。右侧容器有更多文本，然后左侧容器，因此高度自动扩展。左侧容器的内容较少，因此其高度与其他容器相匹配。 如何设置左侧容器高度等于正确的容器？这是我的形象。 enter image description here

这是代码

  .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)
        }

}

感谢 既然整洁有自己的设置，请告诉我如何做到整洁？

Answer 1

制作display: table-cell元素，他们会自动适应彼此的身高。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

要设置子元素的高度，必须在父元素上设置高度。 From the W3C：

指定百分比高度。百分比是根据生成的盒子的高度计算包含块。如果包含块的高度不是明确指定（即，它取决于内容高度），以及这个元素没有绝对定位，值计算为'auto'。

在此示例中，我将外部div的高度设置为130px，但您可以将其设置为百分比。例如，您可以使用此样式填充浏览器窗口：

html,body,.outer{height:100%;}

以下是将.outer的高度设置为130px的工作示例：

.outer{
  border:solid 1px #000;
  padding:.5em;
  margin:1em;
  height:130px;
}
.inner{
  width:50%;
  padding:.5em;
  box-sizing:border-box;
  height:100%;
}
.left{
  background-color:#cba;
  float:left;
}
.right{
  background-color:#abc;
  float:right;
}

.clearfix{
  clear:both;
}

<div class='outer'>
  
  <div class='left inner'>Hello World</div>
  <div class='right inner'>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
  
  <div class='clearfix'></div>
</div>

Answer 3

Neat内置了表格显示，这是一种可以实现此目的的方法。查看row和span-columns的文档均采用显示设置。你可以在这里做一些重构，因为Neats媒体查询首先是移动的：

.mainContainer {
  @include outer-container;
  @include row(table);
}

.rightcontainer,
.leftcontainer {
  padding:10px;

  @include media($tablet-and-up) { 
    @include span-columns(5 of 10, table)
  }
}

.rightcontainer {
  background-color:orange;
}

.leftcontainer {
  background-color:silver;
}

您也可以使用绝对定位来获得此效果，或使用现在位于Bourbon的弹性框。

在波旁威士忌中设置div的高度等于外部容器

3 个答案: