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

Question

--我正试图按照特定的顺序浮动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>

我认为我需要这个顺序的HTML，因为我将使用不同的CSS来按以下顺序显示移动设备的框(但是不要担心这个CSS，应该很容易)：

​

​

用于实现我在图1中显示的布局的CSS，应该创建以下大小的div (在绘制所有div框时获得的艺术许可，这样就可以看到它们-在现实中，这些线应该在顶部而不是在彼此旁边)：

​

​

我编写的CSS代码是：

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‘或'hpcategorytoprightwrapper’的高度达到100%，它都不会服从。我试着从堆栈溢出解决方案中在CSS中的所有直观位置添加“溢出:隐藏”，但这并没有帮助。

红圈3:在盒子的第2行和第3行之间没有水平间隔(例如在框4和5之间)。这很奇怪，因为同样的技术成功地在Box 1和Box 2之间创建了一个间隔。

为了尝试解决红色圆圈2 (方框3不会占用包装器高度的100% )，我创建了一个几乎完全正确的高度，以强制框3的底部边框与框2的底部边框保持一致。这并不完美，而且它们没有正确地排列起来，所以我不能在最后的时候使用它，但是结果更好：

​

​

更新的问题是：

红色圆圈4:图像3永远不可能精确到正确的高度，因为不同的浏览器在文本之间呈现不同的间隙(特别是在移动上)，因此框2和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，以确保它没有不同的边距/填充，这一点也没有帮助。

我怎么才能让这个起作用？

关键：

• 我需要框3扩展到框2底部边框的精确高度，而不知道这是多少像素(由于呈现文本之间的水平间隙不同，浏览器之间的差异)。
• 我希望能够添加框1和框2之间的水平空间‘边距-底部:30 on’在CSS (而不是可笑的间隔div，我目前已经创建)，但由于框边框，这不工作-边缘结束在内部的边框，而不是外部！
• 我需要方框4和框5之间的垂直间距与方框1/2和方框3之间的垂直间距相同。

请帮助我的CSS和HTML -我不知道任何JS，所以不会使用一个解决方案涉及到这一点。

我花了很长时间在这件事上，我非常感谢你的帮助。我的HTML和CSS知识已经10年了，非常过时，但我需要为我即将开始的新业务建立一个网站，所以我已经尽力学习div和“html5”与我以前喜欢的好旧表和TR和TDs，但是我碰到了一块砖墙.

Answer 1

这是你心目中的一般想法吗？My Fiddle

我还有一些想法，但我只想看看我是否让你走上正轨。

.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;
}