使用HTML CSS垂直平行排列4個div

Question

自4個小時以來，我一直在嘗試將4 div並排垂直放置。這些div中也有2 div，用於圖像和段落。我可以將4圖像div並排布置，但是div很難對齊。

我正在使用的代碼：

 .left4 { width: 215px; float: left; } .center4 { float: left; width: 215px; padding-right: 50px; padding-left: 50px; } .center4.1 { width: 215px; float: right; padding-left: 10px; float: left; } .right4 { width: 215px; float: left; padding-left: 40px; } .image4 { height: 100px; width: 215px; border: 4px; border-style: double; border-color: #BABABA; float: left; margin-top: 10px; } .para1 { height: 200px; color: #BABABA; } 

 <div class="4"> <div class="left4"> <div class="image4"> <img> </div> <div class="para1"> <h3 style="color:#BABABA">INDONECTETUS FACILIS</h3> <p>Some wiki engines are open source, whereas others are proprietary. Some permit control over different functions (levels of access)</p> <p align="right"><a href="#" style="color:orange;text-decoration:none">Read More >></a> </p> </div> </div> <div class="center4"> <div class="image4"> <img> </div> <div class="para1"> <h3 style="color:#BABABA">INDONECTETUS FACILIS</h3> <p>Some wiki engines are open source, whereas others are proprietary. Some permit control over different functions (levels of access)</p> <p align="right"><a href="#" style="color:orange;text-decoration:none">Read More >></a> </p> </div> </div> <div class="center4.1"> <div class="image4"> <img> </div> <div class="para1"> <p>Some wiki engines are open source, whereas others are proprietary. Some permit control over different functions (levels of access)</p> <p align="right"><a href="#" style="color:orange;text-decoration:none">Read More >></a> </p> </div> </div> <div class="right4"> <div class="image4"> <img> </div> <div class="para1"> <h3 style="color:#BABABA">INDONECTETUS FACILIS</h3> <p>Some wiki engines are open source, whereas others are proprietary. Some permit control over different functions (levels of access)</p> </div> </div> 

Answer 1

您不能使用.center4.1 。 在CSS中，這意味着您正在嘗試訪問多個類center4和1 。 將其更改為.center4-1

 .left4 { width: 215px; float: left; } .center4 { float: left; width: 215px; padding-right: 50px; padding-left: 50px; } .center4-1 { width: 215px; float: right; padding-left: 10px; float: left; } .right4 { width: 215px; float: left; padding-left: 40px; } .image4 { height: 100px; width: 215px; border: 4px; border-style: double; border-color: #BABABA; float: left; margin-top: 10px; } .para1 { height: 200px; color: #BABABA; } 

 <div class="4"> <div class="left4"> <div class="image4"> <img> </div> <div class="para1"> <h3 style="color:#BABABA">INDONECTETUS FACILIS</h3> <p>Some wiki engines are open source, whereas others are proprietary. Some permit control over different functions (levels of access)</p> <p align="right"><a href="#" style="color:orange;text-decoration:none">Read More >></a> </p> </div> </div> <div class="center4"> <div class="image4"> <img> </div> <div class="para1"> <h3 style="color:#BABABA">INDONECTETUS FACILIS</h3> <p>Some wiki engines are open source, whereas others are proprietary. Some permit control over different functions (levels of access)</p> <p align="right"><a href="#" style="color:orange;text-decoration:none">Read More >></a> </p> </div> </div> <div class="center4-1"> <div class="image4"> <img> </div> <div class="para1"> <p>Some wiki engines are open source, whereas others are proprietary. Some permit control over different functions (levels of access)</p> <p align="right"><a href="#" style="color:orange;text-decoration:none">Read More >></a> </p> </div> </div> <div class="right4"> <div class="image4"> <img> </div> <div class="para1"> <h3 style="color:#BABABA">INDONECTETUS FACILIS</h3> <p>Some wiki engines are open source, whereas others are proprietary. Some permit control over different functions (levels of access)</p> </div> </div> 

Answer 2

我提出了一些基本概念，您將如何做到這一點。

HTML

<div id="container">
    <div class="box">
        <div class="text">Text</div>
    </div>
    <div class="box">
        <div class="text">Text</div>
    </div>
    <div class="box">
        <div class="text">Text</div>
    </div>
    <div class="box">
        <div class="text">Text</div>
    </div>
</div>

CSS

  .box {
        background-color: coral;
        width: 30%;
        display:inline-block;
        margin:10px 0;
        border-radius:5px;
    }
    .text {
        padding: 10px 0;
        color:white;
        font-weight:bold;
        text-align:center;
    }

Answer 3

也許是這樣嗎？

用“ display：flex;” 您有一個簡單的方法來包裝Flex How？

CSS

    .container{
    width: 100%;
    display: flex;
}

.box{
    width: 25%;
    height: auto;
    margin: 5px;
    padding: 5px;
}

.img{
    width: 200px;
    height: 200px;
    border: 1px solid #BABABA;
    margin: 0 auto;
}

.text{
}

HTML

<div class="container">
<div class="box">
    <div class="img">

    </div>
    <div class="text">
        <h3 style="color:#BABABA">INDONECTETUS FACILIS</h3>
        <p>Some wiki engines are open source, whereas others are proprietary. Some permit control over different functions (levels of access)</p>
        <p align="right"><a href="#" style="color:orange;text-decoration:none">Read More >></a></p>
    </div>
</div>
<div class="box">
    <div class="img">

    </div>
    <div class="text">
        <h3 style="color:#BABABA">INDONECTETUS FACILIS</h3>
        <p>Some wiki engines are open source, whereas others are proprietary. Some permit control over different functions (levels of access)</p>
        <p align="right"><a href="#" style="color:orange;text-decoration:none">Read More >></a></p>
    </div>
</div>
<div class="box">
    <div class="img">

    </div>
    <div class="text">
        <h3 style="color:#BABABA">INDONECTETUS FACILIS</h3>
        <p>Some wiki engines are open source, whereas others are proprietary. Some permit control over different functions (levels of access)</p>
        <p align="right"><a href="#" style="color:orange;text-decoration:none">Read More >></a></p>
    </div>
</div>
<div class="box">
    <div class="img">

    </div>
    <div class="text">
        <h3 style="color:#BABABA">INDONECTETUS FACILIS</h3>
        <p>Some wiki engines are open source, whereas others are proprietary. Some permit control over different functions (levels of access)</p>
        <p align="right"><a href="#" style="color:orange;text-decoration:none">Read More >></a></p>
    </div>
</div>