使<aside>元素填充父容器的100％宽度</aside>

Question

我正在网站上工作，并愿意实现以下布局。如果您能指导我使用工作解决方案，我将不胜感激。

在页面标题中有：

1. 左侧的徽标（<a>标记）
2. <aside>
中的2个小部件（<div>标签）

我需要这两个小工具来占用剩余的所有宽度（除徽标宽度外所有100％）。

如何使用CSS执行此操作？如果没有修改HTML就无法做到，那么你建议改变什么（和如何）？响应性不是优先级＃1，但网页本身是响应性的。

我知道有很多可能的解决方案，但请不要建议使用表格的JavaScript解决方案或HTML更改。

与此同时，我将尝试准备一个代码段，以避免可能的误解...

Answer 1

这是你如何做到的：

1. 给header overflow:hidden所以它的高度将包裹浮动元素（或者你可以使用clearfix）

2. 使header的{​​{1}}宽度与徽标的宽度相同。使 徽标padding-left的宽度为float:left，宽度与。{1}}相同 商标。这将填充margin-left的{​​{1}} 标志。

3. 让padding-left的{​​{1}}宽度与第二个相同 header。将第二个header padding-right设为负数 <aside>宽度与第二个<aside>相同。这将填补 float:right margin-right <aside> padding-right。{/ p>

4. 最后，提供第一个header <aside>和<aside>。热潮 - 你已经完成了！

jsfiddle demo