Question

我有一个html以下的结构。容器有一些动态的高度和宽度。基于容器fonticon1和fonticon2分割宽度并占据100％的高度。

.fonticon1,
.fonticon2 {
  display: inline-block;
  align-items: stretch;
  min-height: 100%;
  min-width: 50%;
  font-size: 16px;
}

.icon1:before,
.fonticon2:before {
  content: '\e34c';
  line-height: 1;
}

<span class="container">
    <span class="fonticon1">
        <span class="icon1"></span>
    </span>
    <span class="fonticon2"></span>
</span>

Answer 1

将display: flex;放在container上，以便其块级别的孩子并排排列。

将孩子设置为display: block;，height: 100%;和width: 50%;。

以下演示。我为演示目的添加了一些必要的样式。 Container由红色边框表示，孩子由黑色边框表示。

.container {
  display: flex;
}

.fonticon1,
.fonticon2 {
  display: block;
  width: 50%;
  height: 100%;
}

/* UNNECESSARY DEMO STUFF */
.container { border: 1px solid red; height: 50px; }
.fonticon1, .fonticon2 { border: 1px solid black; box-sizing: border-box; }

<span class="container">
    <span class="fonticon1">
        <span class="icon1"></span>
    </span>
    <span class="fonticon2"></span>
</span>

Answer 2

使用容器作为显示：block;没有弹性你可以放 float：在.fonticon1，.fonticon2中左侧，这将划分你的跨度为2块

.container {
  width: 100%;
display: block;
border: 1px #ddd solid;
overflow: hidden;
}

.fonticon1,
.fonticon2 {
  min-height: 100%;
  min-width: 50%;
  font-size: 16px;
float: left;
}

.icon1:before,
.fonticon2:before {
  content: '\e34c';
  line-height: 1;
}

<span class="container">
    <span class="fonticon1">
        <span class="icon1"></span>
    </span>
    <span class="fonticon2"></span>
</span>

如何根据容器高度和宽度拉伸内容图标span元素的50％宽度和100％高度

2 个答案: