Question

在作业中，我试图用html和css复制教师给出的this picture，但尽管我尽了最大努力，却只有this picture。

我怎样才能让这个空间很好地填充空间？

我的HTML：

<div class="clearfix">
  <section>...</section>
  <aside>...</aside>
</div>

我的CSS：

section, aside {
  float: left;
}

section {
  width: 55%;
}

aside {
  ?
}

Answer 1

一种简单的方法是使用flexbox。在这个例子中，我转动了桌子，并通过将max-width: 20%（只是为了强调效果）设置为蓝色div而使红色div填满其余空间，它不会扩展到超出该宽度。自然地，flex: 1与容器相比，两个div都会尝试宽度相等。

.clearfix {
  display: flex;
  flex: 1 1 100%;
  width: 100%;
}

section {
  flex: 1;
  background-color: red;
}

aside {
  flex: 1;
  background-color: blue;
  max-width: 20%;
}

<div class="clearfix">
  <section>
    asd<br />
    asd<br />
    asd<br />
    asd<br />
    asd<br />
    asd<br />
    asd<br />
    asd<br />
  </section>
  <aside>...</aside>
</div>

Answer 2

这是你想要实现的目标吗？如果我错过了什么，请道歉。我所做的只是手动调整高度，所以

        #aside {
            width: 43%;
            float: right;
            height: 222px;
        }

See my attempt

如何扩展此浮动元素以自动填充clearfix div

2 个答案: