html - 使 <aside> 元素填充父容器的 100% 宽度

Question

我正在做一个网站，愿意实现如下布局。如果您能指导我找到可行的解决方案，我将不胜感激。

在页面的头部有:

1. 左侧的 Logo (<a> 标签)
2. <aside> 中的 2 个小部件(<div> 标签)

我需要这 2 个小部件来占据所有剩余的宽度(除 Logo 宽度外全部 100%)。

我如何使用 CSS 做到这一点？如果不修改 HTML 就无法做到这一点，那么您建议更改什么(以及如何更改)？响应不是第一要务，但网页本身是响应式的。

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

同时我会尝试准备一个代码片段以避免可能的误解......

Answer 1

这是你如何做的:

1. 给header overflow:hidden所以它的高度将包裹 float 元素(或者你可以使用 clearfix)

2. 制作header有padding-left与 Logo 相同的宽度。制作 Logo float:left负margin-left与相同的宽度 标识。这将填写 padding-left的 header与 标志。

3. 制作header有padding-right与第二个宽度相同 <aside> .制作第二个<aside> float:right带有负数 margin-right与第二个宽度相同<aside> .这将填补 padding-right的 header第二个<aside> .

4. 最后，给出第一个 <aside> float:left和 width:100% .砰——大功告成!

jsfiddle demo