2

我是一个整洁的新手。我有一个外部容器和 2 个内部容器。一个是leftcontainer，一个是right。右容器比左容器有更多文本，因此高度自动扩展。左侧容器的内容较少，因此它的高度与另一个容器不匹配。 如何将左容器高度设置为整齐的右容器？这是我的形象。 在此处输入图像描述

这是代码

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

}

谢谢 由于整洁有它自己的设置，请告诉我如何在整洁中做？

4

3 回答 3

1

为了设置子元素的高度，您必须在父元素上设置高度。来自 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>

于 2014-10-15T17:06:07.043 回答
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>

于 2014-10-15T17:01:57.367 回答
1

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 中的 flex-box。

于 2014-10-15T18:35:03.910 回答