我正在努力让这个页面上的元素正确重排：http://www.cmattayers.com/moushegianlaw/
我希望半透明的盒子与滑块图像的左侧（木槌的照片）齐平，并且它们将被融合在一起。＆＃34;现在的问题是，当窗口变窄时，半透明的标注框会下降到肖像照片下方，但滑块照片会保持原样。我已经尝试了内联和块元素的不同组合来实现所需的效果，但似乎没有任何改变。
我在半透明盒子的左侧也有一个奇怪的空间，我似乎无法摆脱它。添加负左边距确实可以修复它，但当它下降时，它会偏离中心并位于视图之外。
我还需要找到一种方法来在框的底部添加填充。当窗口调整大小以显示移动视图时，框的底部直接位于下面的标题文本中（我希望有填充，但添加填充似乎将其添加到框内的文本而不是外部的框）。
答案 0 :(得分：0)
在该设计中，您已经完成了一些我推荐的HTML和CSS内容。
<div id="header">应该是<header>元素。这更具语义性和可访问性。如果您在页面上使用多个标题（允许使用），则可以使用role='banner'区分此标题。header中，将菜单放在<nav>中，然后将纵向+木槌图像+暗段放入<section>。inline和float来定位该段落。 inline和inline-block非常适合流媒体内容，但对于您希望始终排在一行的内容并不是很好。而是给出部分display: table-cell（或使用新的＆＃39; flexbox＆＃39; CSS样式）。为了做到这一点，您可能需要稍微重构一下HTML。