Html 按顺序浮动5个不同大小的框，并使用CSS制作填充包装

我尝试按特定顺序浮动5个箱子，如第一张图所示。所有箱子的大小都相同，只有一个箱子的高度与两个箱子的高度相同+它们之间的空间（但这似乎是致命的）：

这里的要点是：

答：5个“框”中的每一个都是一个div元素，关键是有一个由CSS绘制的边框（我们很快就会看到这会导致填充/边距的问题）

B：红色圆圈1-图3的高度不能精确，但我仍然需要框3的底边与框2的底边完全一致

我的HTML是：

<div class="hpcategorypagewrapper">
    <div class="hpcategorytopwrapper">
        <div class="hpcategorytopleftwrapper">
            <div class="hpcategory">
                <h1 class="hpcategory">Title One</h1>
                <h3 class="hpcategory">Subtitle One<br /><img src="/image1.jpg" /></h3>
            </div>
            <div class="hpcategoryspacer"> </div>
            <div class="hpcategory">
                <h1 class="hpcategory">Title Two</h1>
                <h3 class="hpcategory">Subtitle Two<br /><img src="/image2.jpg" /></h3>
            </div>
        </div>
        <div class="hpcategorytoprightwrapper">
            <div class="hpcategory">
                <h1 class="hpcategory">Title Three</h1>
                <h3 class="hpcategory">Subtitle Three<br /><img src="/image3.jpg" /></h3>
            </div>
        </div>
    </div>
    <div class="hpcategoryspacer"> </div>
    <div class="hpcategorybottomwrapper">
        <div class="hpcategoryleft">
            <h1 class="hpcategory">Title Four</h1>
            <h3 class="hpcategory">Subtitle Four<br /><img src="/image4.jpg" /></h3>
        </div>
        <div class="hpcategoryright">
            <h1 class="hpcategory">Title Five</h1>
            <h3 class="hpcategory">Subtitle Five<br /><img src="/image5.jpg" /></h3>
        </div>
    </div>
</div>

h1.hpcategory { font-size: 45px; color: #00bfff; text-align: center; font-weight: 700; margin-top: 5px; margin-bottom: 0; padding-bottom: 0; line-height: 0.8em; }
h3.hpcategory { font-size: 30px; color: #00bfff; text-align: center; font-weight: 600; margin-top: 5px; margin-bottom: 0; padding-bottom: 0; line-height: 0.7em; }
img.hpcategory { margin: 0; padding: 0; }

div.hpcategorypagewrapper { width: 100%; }
div.hpcategorypagetopwrapper { width: 100%; height: 100%; clear: right; padding-bottom: 20px; overflow: hidden; }
div.hpcategorypagebottomwrapper { width: 100%; padding-top: 20px; }
div.hpcategorytopleftwrapper { width: 49%; float: left; }
div.hpcategorytoprightwrapper { width: 49%; height: 100%; float: right; clear: right; }
div.hpcategory { border: 3px solid #00bfff; }
div.hpcategoryleft { width: 49%; float: left; border: 3px solid #00bfff; }
div.hpcategoryright { width: 49%; float: right; border: 3px solid #00bfff; }
div.hpcategoryspacer { height: 25px; width: 100%; clear: right; }

但是布局是这样的：

<div class="hpcategorypagewrapper">
    <div class="hpcategorytopwrapper">
        <div class="hpcategorytopleftwrapper">
            <div class="hpcategory">
                <h1 class="hpcategory">Title One</h1>
                <h3 class="hpcategory">Subtitle One<br /><img src="/image1.jpg" /></h3>
            </div>
            <div class="hpcategoryspacer"> </div>
            <div class="hpcategory">
                <h1 class="hpcategory">Title Two</h1>
                <h3 class="hpcategory">Subtitle Two<br /><img src="/image2.jpg" /></h3>
            </div>
        </div>
        <div class="hpcategorytoprightwrapper">
            <div class="hpcategory">
                <h1 class="hpcategory">Title Three</h1>
                <h3 class="hpcategory">Subtitle Three<br /><img src="/image3.jpg" /></h3>
            </div>
        </div>
    </div>
    <div class="hpcategoryspacer"> </div>
    <div class="hpcategorybottomwrapper">
        <div class="hpcategoryleft">
            <h1 class="hpcategory">Title Four</h1>
            <h3 class="hpcategory">Subtitle Four<br /><img src="/image4.jpg" /></h3>
        </div>
        <div class="hpcategoryright">
            <h1 class="hpcategory">Title Five</h1>
            <h3 class="hpcategory">Subtitle Five<br /><img src="/image5.jpg" /></h3>
        </div>
    </div>
</div>

h1.hpcategory { font-size: 45px; color: #00bfff; text-align: center; font-weight: 700; margin-top: 5px; margin-bottom: 0; padding-bottom: 0; line-height: 0.8em; }
h3.hpcategory { font-size: 30px; color: #00bfff; text-align: center; font-weight: 600; margin-top: 5px; margin-bottom: 0; padding-bottom: 0; line-height: 0.7em; }
img.hpcategory { margin: 0; padding: 0; }

div.hpcategorypagewrapper { width: 100%; }
div.hpcategorypagetopwrapper { width: 100%; height: 100%; clear: right; padding-bottom: 20px; overflow: hidden; }
div.hpcategorypagebottomwrapper { width: 100%; padding-top: 20px; }
div.hpcategorytopleftwrapper { width: 49%; float: left; }
div.hpcategorytoprightwrapper { width: 49%; height: 100%; float: right; clear: right; }
div.hpcategory { border: 3px solid #00bfff; }
div.hpcategoryleft { width: 49%; float: left; border: 3px solid #00bfff; }
div.hpcategoryright { width: 49%; float: right; border: 3px solid #00bfff; }
div.hpcategoryspacer { height: 25px; width: 100%; clear: right; }

问题是：

<div class="hpcategorypagewrapper">
    <div class="hpcategorytopwrapper">
        <div class="hpcategorytopleftwrapper">
            <div class="hpcategory">
                <h1 class="hpcategory">Title One</h1>
                <h3 class="hpcategory">Subtitle One<br /><img src="/image1.jpg" /></h3>
            </div>
            <div class="hpcategoryspacer"> </div>
            <div class="hpcategory">
                <h1 class="hpcategory">Title Two</h1>
                <h3 class="hpcategory">Subtitle Two<br /><img src="/image2.jpg" /></h3>
            </div>
        </div>
        <div class="hpcategorytoprightwrapper">
            <div class="hpcategory">
                <h1 class="hpcategory">Title Three</h1>
                <h3 class="hpcategory">Subtitle Three<br /><img src="/image3.jpg" /></h3>
            </div>
        </div>
    </div>
    <div class="hpcategoryspacer"> </div>
    <div class="hpcategorybottomwrapper">
        <div class="hpcategoryleft">
            <h1 class="hpcategory">Title Four</h1>
            <h3 class="hpcategory">Subtitle Four<br /><img src="/image4.jpg" /></h3>
        </div>
        <div class="hpcategoryright">
            <h1 class="hpcategory">Title Five</h1>
            <h3 class="hpcategory">Subtitle Five<br /><img src="/image5.jpg" /></h3>
        </div>
    </div>
</div>

h1.hpcategory { font-size: 45px; color: #00bfff; text-align: center; font-weight: 700; margin-top: 5px; margin-bottom: 0; padding-bottom: 0; line-height: 0.8em; }
h3.hpcategory { font-size: 30px; color: #00bfff; text-align: center; font-weight: 600; margin-top: 5px; margin-bottom: 0; padding-bottom: 0; line-height: 0.7em; }
img.hpcategory { margin: 0; padding: 0; }

div.hpcategorypagewrapper { width: 100%; }
div.hpcategorypagetopwrapper { width: 100%; height: 100%; clear: right; padding-bottom: 20px; overflow: hidden; }
div.hpcategorypagebottomwrapper { width: 100%; padding-top: 20px; }
div.hpcategorytopleftwrapper { width: 49%; float: left; }
div.hpcategorytoprightwrapper { width: 49%; height: 100%; float: right; clear: right; }
div.hpcategory { border: 3px solid #00bfff; }
div.hpcategoryleft { width: 49%; float: left; border: 3px solid #00bfff; }
div.hpcategoryright { width: 49%; float: right; border: 3px solid #00bfff; }
div.hpcategoryspacer { height: 25px; width: 100%; clear: right; }

红色圆圈2：方框3未向下延伸至方框2的底部。此外，方框4已放置在方框3应延伸至的位置。
无论我如何尝试强制将“hpcategorypagetopwrapper”或“HPCategoryPrightWrapper”的高度设置为100%，它都不会遵守。 我尝试从stackoverflow解决方案中在CSS中所有直观的位置添加“overflow:hidden”，但没有任何帮助

红色圆圈3：方框第2行和第3行之间（例如方框4和5之间）没有水平垫片。这很奇怪，因为同样的技术成功地在盒子1和盒子2之间创建了一个垫片

为了尝试解析红色圆圈2（方框3不会占据其包装高度的100%），我创建了一个高度几乎完全正确的图像，以强制方框3的下边框与方框2的下边框对齐。这不是完美的，而且他们没有正确排列，因此我不能将其用于决赛，但结果更好：

<div class="hpcategorypagewrapper">
    <div class="hpcategorytopwrapper">
        <div class="hpcategorytopleftwrapper">
            <div class="hpcategory">
                <h1 class="hpcategory">Title One</h1>
                <h3 class="hpcategory">Subtitle One<br /><img src="/image1.jpg" /></h3>
            </div>
            <div class="hpcategoryspacer"> </div>
            <div class="hpcategory">
                <h1 class="hpcategory">Title Two</h1>
                <h3 class="hpcategory">Subtitle Two<br /><img src="/image2.jpg" /></h3>
            </div>
        </div>
        <div class="hpcategorytoprightwrapper">
            <div class="hpcategory">
                <h1 class="hpcategory">Title Three</h1>
                <h3 class="hpcategory">Subtitle Three<br /><img src="/image3.jpg" /></h3>
            </div>
        </div>
    </div>
    <div class="hpcategoryspacer"> </div>
    <div class="hpcategorybottomwrapper">
        <div class="hpcategoryleft">
            <h1 class="hpcategory">Title Four</h1>
            <h3 class="hpcategory">Subtitle Four<br /><img src="/image4.jpg" /></h3>
        </div>
        <div class="hpcategoryright">
            <h1 class="hpcategory">Title Five</h1>
            <h3 class="hpcategory">Subtitle Five<br /><img src="/image5.jpg" /></h3>
        </div>
    </div>
</div>

h1.hpcategory { font-size: 45px; color: #00bfff; text-align: center; font-weight: 700; margin-top: 5px; margin-bottom: 0; padding-bottom: 0; line-height: 0.8em; }
h3.hpcategory { font-size: 30px; color: #00bfff; text-align: center; font-weight: 600; margin-top: 5px; margin-bottom: 0; padding-bottom: 0; line-height: 0.7em; }
img.hpcategory { margin: 0; padding: 0; }

div.hpcategorypagewrapper { width: 100%; }
div.hpcategorypagetopwrapper { width: 100%; height: 100%; clear: right; padding-bottom: 20px; overflow: hidden; }
div.hpcategorypagebottomwrapper { width: 100%; padding-top: 20px; }
div.hpcategorytopleftwrapper { width: 49%; float: left; }
div.hpcategorytoprightwrapper { width: 49%; height: 100%; float: right; clear: right; }
div.hpcategory { border: 3px solid #00bfff; }
div.hpcategoryleft { width: 49%; float: left; border: 3px solid #00bfff; }
div.hpcategoryright { width: 49%; float: right; border: 3px solid #00bfff; }
div.hpcategoryspacer { height: 25px; width: 100%; clear: right; }

较新的问题是：

<div class="hpcategorypagewrapper">
    <div class="hpcategorytopwrapper">
        <div class="hpcategorytopleftwrapper">
            <div class="hpcategory">
                <h1 class="hpcategory">Title One</h1>
                <h3 class="hpcategory">Subtitle One<br /><img src="/image1.jpg" /></h3>
            </div>
            <div class="hpcategoryspacer"> </div>
            <div class="hpcategory">
                <h1 class="hpcategory">Title Two</h1>
                <h3 class="hpcategory">Subtitle Two<br /><img src="/image2.jpg" /></h3>
            </div>
        </div>
        <div class="hpcategorytoprightwrapper">
            <div class="hpcategory">
                <h1 class="hpcategory">Title Three</h1>
                <h3 class="hpcategory">Subtitle Three<br /><img src="/image3.jpg" /></h3>
            </div>
        </div>
    </div>
    <div class="hpcategoryspacer"> </div>
    <div class="hpcategorybottomwrapper">
        <div class="hpcategoryleft">
            <h1 class="hpcategory">Title Four</h1>
            <h3 class="hpcategory">Subtitle Four<br /><img src="/image4.jpg" /></h3>
        </div>
        <div class="hpcategoryright">
            <h1 class="hpcategory">Title Five</h1>
            <h3 class="hpcategory">Subtitle Five<br /><img src="/image5.jpg" /></h3>
        </div>
    </div>
</div>

h1.hpcategory { font-size: 45px; color: #00bfff; text-align: center; font-weight: 700; margin-top: 5px; margin-bottom: 0; padding-bottom: 0; line-height: 0.8em; }
h3.hpcategory { font-size: 30px; color: #00bfff; text-align: center; font-weight: 600; margin-top: 5px; margin-bottom: 0; padding-bottom: 0; line-height: 0.7em; }
img.hpcategory { margin: 0; padding: 0; }

div.hpcategorypagewrapper { width: 100%; }
div.hpcategorypagetopwrapper { width: 100%; height: 100%; clear: right; padding-bottom: 20px; overflow: hidden; }
div.hpcategorypagebottomwrapper { width: 100%; padding-top: 20px; }
div.hpcategorytopleftwrapper { width: 49%; float: left; }
div.hpcategorytoprightwrapper { width: 49%; height: 100%; float: right; clear: right; }
div.hpcategory { border: 3px solid #00bfff; }
div.hpcategoryleft { width: 49%; float: left; border: 3px solid #00bfff; }
div.hpcategoryright { width: 49%; float: right; border: 3px solid #00bfff; }
div.hpcategoryspacer { height: 25px; width: 100%; clear: right; }

红色圆圈4：由于不同的浏览器呈现不同的文本间距（尤其是在移动设备上），因此框2和框3的底部边框不对齐，因此图像3的高度永远不可能精确

红色圆圈5：由于某些疯狂的原因，方框4和5之间的水平间隙明显小于方框1/2和方框3之间的水平间隙。我不明白为什么给定的框1、3、4和5都设置为49%的宽度。我试着插入

margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0;

为所有div元素添加CSS，以确保没有不同的边距/填充弄乱了这一点，这没有帮助

我怎样才能让它工作

关键是：

<div class="hpcategorypagewrapper">
    <div class="hpcategorytopwrapper">
        <div class="hpcategorytopleftwrapper">
            <div class="hpcategory">
                <h1 class="hpcategory">Title One</h1>
                <h3 class="hpcategory">Subtitle One<br /><img src="/image1.jpg" /></h3>
            </div>
            <div class="hpcategoryspacer"> </div>
            <div class="hpcategory">
                <h1 class="hpcategory">Title Two</h1>
                <h3 class="hpcategory">Subtitle Two<br /><img src="/image2.jpg" /></h3>
            </div>
        </div>
        <div class="hpcategorytoprightwrapper">
            <div class="hpcategory">
                <h1 class="hpcategory">Title Three</h1>
                <h3 class="hpcategory">Subtitle Three<br /><img src="/image3.jpg" /></h3>
            </div>
        </div>
    </div>
    <div class="hpcategoryspacer"> </div>
    <div class="hpcategorybottomwrapper">
        <div class="hpcategoryleft">
            <h1 class="hpcategory">Title Four</h1>
            <h3 class="hpcategory">Subtitle Four<br /><img src="/image4.jpg" /></h3>
        </div>
        <div class="hpcategoryright">
            <h1 class="hpcategory">Title Five</h1>
            <h3 class="hpcategory">Subtitle Five<br /><img src="/image5.jpg" /></h3>
        </div>
    </div>
</div>

h1.hpcategory { font-size: 45px; color: #00bfff; text-align: center; font-weight: 700; margin-top: 5px; margin-bottom: 0; padding-bottom: 0; line-height: 0.8em; }
h3.hpcategory { font-size: 30px; color: #00bfff; text-align: center; font-weight: 600; margin-top: 5px; margin-bottom: 0; padding-bottom: 0; line-height: 0.7em; }
img.hpcategory { margin: 0; padding: 0; }

div.hpcategorypagewrapper { width: 100%; }
div.hpcategorypagetopwrapper { width: 100%; height: 100%; clear: right; padding-bottom: 20px; overflow: hidden; }
div.hpcategorypagebottomwrapper { width: 100%; padding-top: 20px; }
div.hpcategorytopleftwrapper { width: 49%; float: left; }
div.hpcategorytoprightwrapper { width: 49%; height: 100%; float: right; clear: right; }
div.hpcategory { border: 3px solid #00bfff; }
div.hpcategoryleft { width: 49%; float: left; border: 3px solid #00bfff; }
div.hpcategoryright { width: 49%; float: right; border: 3px solid #00bfff; }
div.hpcategoryspacer { height: 25px; width: 100%; clear: right; }

• 我需要将框3扩展到框2底部边框的精确高度，而不知道这是多少像素（由于文本之间呈现水平间距的差异，浏览器之间会有所不同）
• 我希望能够在CSS中使用“margin bottom:30px”在框1和框2之间添加水平空间（而不是我目前创建的可笑的间隔div），但是由于框边框，这不起作用-边框的内部而不是外部
• 我需要方框4和方框5之间的垂直间距与方框1/2和方框3之间的垂直间距相同

请帮助我使用CSS和HTML-我不知道任何JS，因此将无法使用涉及该问题的解决方案

---

我花了很长时间在这方面，我真的很感谢你的帮助。我的HTML和CSS知识已经有10年的历史了，而且已经过时了，但是我需要为我即将开始的新业务建立一个网站，所以我已经尽了最大的努力来学习DIV和“html5”与我过去喜欢的好的旧表、TR和TDs，但是我碰到了一堵墙…

这是你的一般想法吗

我还有一些想法，但我只是想看看你的想法是否正确

.block {
    width:48%;
    float:left;
    margin:1%;
    background:#ccc;
}
.wrap-three {
    position:relative;
    width:100%;
    height:auto;
    float:left;
}
.block-one {
    height:46%;
    float:left;
   margin-bottom:3%;
}
.block-two {
    height:46%;
   margin-top:3%;
    position:absolute;
    left:0;
    bottom:0;
}
.block-three {
    height:300px;
}

---

不幸的是，你想要一个这样的布局，这是在给自己设置一个痛苦的世界。即使您开始使用固定高度、定位等，也可能在一个浏览器中而不是在另一个浏览器中获得所需的结果。这就是平面设计不能很好地应用于网络的地方。我非常感谢你的回复。但它看起来很简单！这里出现的关键问题是什么？听起来这可以通过Bootstrap的列来完成。在CSS中处理匹配高度是很棘手的，尤其是在涉及文本的地方。每个浏览器显示的文本略有不同，因此，首先，依赖文本高度时，您会遇到麻烦。然后最终用户可以增加字体大小，你的布局就会崩溃。web是一种流动介质，不适合固定。为什么我不能将右上角的容器设置为与左上角容器相同的高度？这使我困惑不已。一个带有tr和td的表很容易实现这一点……顺便说一句，在每种情况下，#3中的图像大小是否恰好是#1和#2中图像大小的两倍？无论哪种方式，我们都有一些选择。我认为我们可以做到这一点？这个例子的响应速度设定为520像素。迈克尔，这看起来真的很好！很抱歉回复得太晚，我在英国，所以我只睡了6个小时。为了回答您的问题，#3上的图像理想情况下正好是#1/2中图像大小的两倍+方框1/2之间的边距。因为不同的浏览器在标题1和副标题1之间呈现不同的间隙，对于t2/st2，我必须减去一些像素，以确保图像不太高（或者设置框3，如果它将框3的下边框推到框2下方，则将图像切掉）。一个棘手的问题可能是为每个框添加边框。我发现“边距”会将边距添加到边框内部而不是外部，从而将所有框的边框推到彼此相邻的位置。到目前为止，我很想和你的JSFIDLE一起玩（并弄清楚那个网站到底是什么），但需要参加几个小时的会议。非常感谢你迄今为止的帮助。大卫：这些是可以克服的！您希望以正确的语义顺序在HTML中加载页面是至关重要的。如果添加边框，请尝试使用一个小数点来减少宽度，即46.7%。我相信这可以追溯到IE8。至于图像，它可以用于