使用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>