Question

我一直在努力尝试让文字正确地放在页面上。我想要做的是能够在这个半日历上提供图像和标题，但是使图像和标题扩展到多个列。现在图像延伸到多个列，但文本没有。此外，图像与另一个图像重叠，我也想阻止它。

      .col1 {
            float: left;
            left: 5%;
        }

        .col2 {
            float: left;
            left: 15%;
        }

        .col3 {
            float: left;
            left: 35%;
        }

        .col4 {
            float: left;
            right: 35%;
   
        }

        .col5 {
            float: left;
            left: 75%;
        }

        .col6 {
            float: left;
            left: 95%;
        }

        .col7 {
            float: left;
            left: 100%;
        }

        .col8 {
            float: left;
            left: 90%;
        }

        .col9 {
            float: left;
            left: 90%;
        }

        div {
            display: inline;
            width: 150px;
            padding: 3px;
            margin: 6px;
            text-align: justify;
        }

<!DOCTYPE HTML>
<html>

<head>


</head>

<body>
    <div class="col1">
        <strong>Jan</strong><br><br> No Training Due.
    </div>

    <div class="col2">
        <strong> Feb</strong><br><br> No Training Due.
    </div>

    <div class="col3">
        <strong> March</strong><br><br>No Training Due.
    </div>

    <div class="col4">
        <strong>Apr</strong><br><br> <img src="http://dummyimage.com/400x100/000/fff"/><span>The my class training opens Apr 16 - June 16. Open to All Associates</span>
    </div>

    <div class="col5">
        <strong>May</strong><br>    <img src="http://dummyimage.com/100x100/000/fff"/> Medicaid Compliance<br>
    </div>

    <div class="col6">
         <strong>June</strong><br> 
    </div>

    <div class="col7">
        July<br> multi-column layout with inline images. multi-column layout with inline images. multi-column layout with inline images. multi-column layout with inline images. multi-column layout with inline images.
    </div>


    <div class="col8">
        Aug<br> multi-column layout with inline images. multi-column layout with inline images. multi-column layout with inline images. multi-column layout with inline images. multi-column layout with inline images.
    </div>
    <div class="col9">
        Sep<br> multi-column layout with inline images. multi-column layout with inline images. multi-column layout with inline images. multi-column layout with inline images. multi-column layout with inline images.
    </div>
</body>

</html>

从图片中移除重叠并在图片下方生成标题

0 个答案: