创建仅 HTML/CSS 树形图时的 div 定位

Question

我是 CSS 的新手，但我想知道是否有更简单的方法来订购这些盒子，因为我需要类似树状图的东西，它链接到某个页面，如您所见, 有一些动画。目前我想在第二个盒子下面订购第三个盒子，我不知道如何，我正在尝试使用 float 和 clear，但对我不起作用。请原谅我的初学者知识，但我正在学习。此外，如果有更简单的方法来执行此操作，除了像我正在做的那样手动操作，请告诉我。

    .cbox1 {
    border:solid 2.5px white;
    position:relative;
    float:left;
    z-index: 10;
    }

    .cboxtext {
    text-align:center;
    height:50%;
    margin-top: 200px;
    color:#fff;
    }

    .cboxpercentage {
    text-align:center;
    font-size:80px;
    font-weight: bold;
    color:#fff;
    margin-top: -300px;
    }

    <a href="#">
        <div class="cbox1 hvr-bounce-out" style="width:400px; height:400px;background-color:steelblue;">
         <h2 class="cboxtext"> Company 1 </h2>
         <h1 class="cboxpercentage"> 62,5% </h1>
            </div></a>
     <a href="#">
    <div id="wrapper">
     <div class="cbox1 hvr-sink" style="width:200px; height:200px; background-color:dodgerblue;">
         <h2 class="cboxtext" style="font-size:24px; margin-top:90px;"> Company 2 </h2>
         <h1 class="cboxpercentage"> 32,5% </h1>
            </div></a>
        <a href="#">
            <div class="cbox1 hvr-float" style="width:200px; height:200px; background-color:blue;">
                <h2 class="cboxtext"> Company 3 </h2>
                <h1 class="cboxpercentage"> 5% </h1>
            </div>
        </a>
        </div>

Answer 1

这是您的代码的新版本：

    .cbox1,#wrapper {
        position: relative;
    }
    .cbox1 a,#wrapper a {
        text-decoration: none;
        display: block;
        width: 400px;
        height: 400px;
    }
    .cbox1 a span,#wrapper a span {
        display: block;
        position: absolute;
        width: 100%;
        line-height: 400px;
    }

    .cbox1 a span.cboxtext,#wrapper a span.cboxtext {
        line-height:30px;
    }

    .cbox1 {
        width: 400px;
        height: 400px;
        float: left;
    }

    a .cboxtext {
        top: 10px;
        text-align:center;
        color:#fff;
    }

    .cboxpercentage {
        text-align:center;
        font-size:80px;
        font-weight: bold;
        color:#fff;
    }

    #wrapper {
        float: left;
        width: 200px;
    }

    #wrapper a span {
        line-height: 200px;
    }

    #wrapper .cbox1 {
        width: 200px;
        height: 200px;
    }

    #wrapper .cbox1 a {
        width: 200px;
        height: 200px;
    }

    #wrapper .cboxpercentage {
        font-size:40px;
    }

<div class="cbox1 hvr-bounce-out" style="background-color:steelblue;">
    <a href="#">
        <span class="cboxtext">Company 1</span>
        <span class="cboxpercentage"> 62,5% </span>
    </a>
</div>
<div id="wrapper">
    <div class="cbox1 hvr-sink" style="background-color:dodgerblue;">
        <a href="#">
            <span class="cboxtext">Company 2</span>
            <span class="cboxpercentage">32,5%</span>
        </a>
    </div>
    <div class="cbox1 hvr-float" style="background-color:blue;">
        <a href="#">
            <span class="cboxtext">Company 3</span>
            <span class="cboxpercentage">5%</span>
        </a>
    </div>
</div>

创建仅 HTML/CSS 树形图时的 div 定位

Positioning of divs, when creating a HTML/CSS only treemap

html

css

treemap