[英]Arranging 4 divs parallel vertically using html css
自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>
您不能使用.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>
我提出了一些基本概念,您将如何做到这一点。
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;
}
也许是这样吗?
用“ 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.