使用html css垂直排列4個div垂直使用html css

Question

我想從4個小時到垂直排列4個div。其中div也有2個div，裏面是圖像和段落。我可以安排4個div圖像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

我puuting一些基本的概念，你如何能做到this.It將在所有尺寸

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>