html - 元素不会堆叠在彼此之上

Question

我正在尝试实现与图 1 中相同的 TABLE 外观，目前我在图 2 中。

如何实现这种外观？我使用了与图像 1 中的人完全相同的 HTML，因此我需要使用 CSS 来完成此操作。

我试过使用 floats/text-align，我不太确定如何实现这种效果。

您可以在此处查看实际的网站模板:https://empla.popitheme.com/v2/

图1

图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;
    }

Answer 1

由于这些是类似表格的数据，您应该使用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>