html - 响应元素没有正确回流？

Question

我正在努力让这个页面上的元素正确重排:http://www.cmattayers.com/moushegianlaw/

我希望半透明框与 slider 图像(木槌的照片)的左侧齐平，并将它们“融合在一起”。现在的问题是，当窗口变窄时，半透明的标注框会下降到人像照片下方，但 slider 照片会留在原处。我尝试了内联元素和 block 元素的不同组合来达到预期的效果，但似乎没有任何改变。

半透明框的左侧还有一条奇怪的空间，我似乎无法摆脱。添加负的左边距确实可以解决它，但是当它下降到下方时，它会偏离中心并且在 View 之外。

我还需要找到一种向框底部添加填充的方法。当窗口调整大小以显示移动 View 时，框的底部直接位于下面的标题文本上(我希望有填充，但添加填充似乎是将其添加到框内的文本而不是框的外部框)。

Answer 1

在那个设计中，你做了一些我不建议做的 HTML 和 CSS 事情。

1. 首先，您的 <div id="header">应该是 <header>元素。这更具语义性和可访问性。如果你在页面上使用多个标题(这是允许的)，你可以使用 role='banner' 来区分这个。 .
2. 您不应该将所有这些 block 都放入标题中。而是将 Logo 保留在 header 中, 将菜单放在 <nav> 中，然后把人像+木槌图+深色段落放到一个<section>中.
3. 接下来，为了回答您的问题，也许不要使用 inline和 float定位段落。 inline和 inline-block非常适合流动的内容，但不适合您希望始终排成一排的内容。而是给零件 display: table-cell (或使用新的“flexbox”CSS 样式)。

要做到这一点，您可能需要稍微重构一下 HTML。