Question

我尝试按特定顺序浮动5个方框，如第一个图所示。所有方框都是相同的大小，除了一个与2个方框相同的高度+他们之间的空间（但这似乎是杀手）：

Desired Layout

这里的要点是：

A：5＆＃39;中的每一个＆＃39;是一个div元素，关键是有一个CSS绘制的边框（我们很快就会看到这会导致填充/边距问题）

B：红圈1 - 图像3不能是正确的高度，但我仍然需要Box 3的下边框与Box 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，应该很容易）：

mobile layout

CSS 我正在尝试实现我在图片ONE中显示的布局应该创建以下大小的div （在绘制所有div时采用的艺术许可盒子让他们可以看到 - 实际上这些线条将在顶部而不是彼此相邻）：

div structure

我写的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; }

然而布局看起来像这样：

main problems

问题是：

红色圆圈2：方框3没有延伸到方框2的底部。此外，方框4已放置在方框3应延伸到的位置。
无论我如何尝试并强制“hpcategorypagetopwrapper”的高度。或者＆＃39; hpcategorytoprightwrapper＆＃39;到100％，它不会服从。我尝试添加＆溢出：隐藏＆＃39;在stackoverflow解决方案中CSS的所有直观位置，但是没有帮助。

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

试图尝试解决Red Circle 2（Box 3赢得了100％的包装器高度）我创建了一个几乎完全正确的高度的图像，以强制第3个框的底部边框与第2栏的底部边界一致。这并不完美，并且它们没有正确排列，所以我不能将它用于决赛，但结果更好：< /强>

较新的问题是：

红圈4：图像3永远不会是正确的高度，因为不同的浏览器在文本之间呈现不同的间隙（特别是在移动设备上），因此盒子2和盒子的底部边界不同。 3不要排队。

Red Circle 5：由于一些疯狂的疯狂原因，Box 4和5之间的水平差距明显小于Box 1/2和Box 3之间。我无法解决为什么给出Box 1,3,4和5都设置为49％宽度。我试着插入

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

进入所有div元素的CSS，以确保它没有不同的边距/填充搞乱这一点，这没有帮助。

我怎样才能让它发挥作用？

重要的是：

我需要方框3扩展到方框2底部边框的精确高度，而不知道这是多少像素（由于文本之间渲染水平间隙的差异，因浏览器而异）。

我希望能够在框1和框2之间添加＆＃39; margin-bottom：30px＆＃39;在CSS（而不是我目前创建的荒谬的间隔div），但由于框边框不起作用 - 边距最终在边框的内侧而不是外部！

我需要Box 4和Box 5之间的垂直间距与Box 1/2和Box 3之间的垂直间距相同。

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

我已经花了很多年的时间，我非常感谢你的帮助。我的HTML和CSS知识已有10年历史，而且非常过时，但我需要为我开始的新业务组建一个网站，以便我尽我所能学习div和＆＃39; html5＆＃39 ;与我过去喜欢的好旧桌子和TR和TD相比，但是我碰到了一堵砖墙......

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

按顺序浮动5个不同大小的盒子并用CSS制作填充包装

1 个答案: