我正在尝试实现与图 1 中相同的 TABLE 外观,目前我在图 2 中。
如何实现这种外观?我使用了与图像 1 中的人完全相同的 HTML,因此我需要使用 CSS 来完成此操作。
我试过使用 floats/text-align,我不太确定如何实现这种效果。
您可以在此处查看实际的网站模板:https://empla.popitheme.com/v2/
图2
<section id="about">
<div class="container col-6">
<div class="row">
<div class="col-5 about-photo">
<a href="https://placeholder.com"><img src="http://via.placeholder.com/500x500" class="img-fluid"></a>
</div>
<div class="col-7 about-text">
<h1>I'm <span class="text-primary">Oliver Stott</span></h1>
<p>Web Design and Junior Web Developer</p>
<div class="col-8">
<ul class="table">
<li>
<span><strong>Age</strong></span>
<span>19</span>
</li>
<li>
<span><strong>Address</strong></span>
<span>1234 Street, W3 Island</span>
</li>
<li>
<span><strong>Email</strong></span>
<span>contact@domain.com</span>
</li>
<li>
<span><strong>Phone</strong></span>
<span>+0123 456 789</span>
</li>
<li>
<span><strong>Website</strong></span>
<span>
<a href="#">http://www.envato.com</a>
</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
我的 CSS
#about .container{
background-color: #fff;
padding: 0;
height: auto;
margin: 20px auto;
text-align: center;
box-shadow: 0px 0px 40px -10px rgba(59,66,71,1);
border: 0.5px solid #72A7A3;
}
.about-photo{
height: auto;
width: 100;
}
.table, h1, p{
clear: both;
float: left;
padding-left: 0;
}
.about-text h1{
padding-top: 20px;
}
.about-text p{
padding-top: 10px;
font-size: 1.2rem;
}
.table li{
text-align: left;
list-style-type: none;
}
span{
padding-left: ;
text-align: right;
}
最佳答案
由于这些是类似表格的数据,您应该使用table
结构(即table
标签等)。我不想重写您的整个代码,所以我只是通过 CSS 将表格属性应用于您的标记:
(全屏打开才能正常看到,所以内容不会跑出容器)
#about .container {
background-color: #fff;
padding: 0;
height: auto;
margin: 20px auto;
text-align: center;
box-shadow: 0px 0px 40px -10px rgba(59, 66, 71, 1);
border: 0.5px solid #72A7A3;
}
.about-photo {
height: auto;
width: 100px;
}
.table {
display: table;
}
.table li {
display: table-row;
}
.table li span {
display: table-cell;
text-align: left;
}
.table li span:first-child {
min-width: 120px;
}
h1,
p {
clear: both;
float: left;
padding-left: 0;
}
.about-text h1 {
padding-top: 20px;
}
.about-text p {
padding-top: 10px;
font-size: 1.2rem;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<section id="about">
<div class="container">
<div class="row">
<div class="col-5 about-photo">
<a href="https://placeholder.com"><img src="http://via.placeholder.com/500x500" class="img-fluid"></a>
</div>
<div class="col-7 about-text">
<h1>I'm <span class="text-primary">Oliver Stott</span></h1>
<p>Web Design and Junior Web Developer</p>
<div class="col-8">
<ul class="table">
<li>
<span><strong>Age</strong></span>
<span>19</span>
</li>
<li>
<span><strong>Address</strong></span>
<span>1234 Street, W3 Island</span>
</li>
<li>
<span><strong>Email</strong></span>
<span>contact@domain.com</span>
</li>
<li>
<span><strong>Phone</strong></span>
<span>+0123 456 789</span>
</li>
<li>
<span><strong>Website</strong></span>
<span>
<a href="#">http://www.envato.com</a>
</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</section>
关于html - 元素不会堆叠在彼此之上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50428000/