html - 不是我所有的列表都围绕图像

Question

我有一个无序列表，我试图让它环绕图像。出于某种原因，列表底部的两个元素“突出”。

下面是我写的html代码:

<div class="skills">
    <h2>My Skills.</h2>
    <div class="skill-row">
        <img class="computer-class" src="/image/computer.png" alt="Computer">
        <h3>Makers Academy</h3>
        <ul class="list">
            <li>Agile Principles and Extreme Programming (XP) Values</li>
            <li>HTML, CSS and JavaScript</li>
            <li>Pair Programming </li>
            <li>Independent and Remote Learning</li>
            <li>Problem Solving</li>
            <li>OOP, TDD, SOLID, MVC, DDD</li>
            <li>JavaScript ES6</li>
            <li>SQL, PostgreSQL</li>
            <li>MongoDB</li>
            <li>Swift</li>
        </ul>
    </div>
</div>

这是我写的CSS代码:

h2 {
    color: #66BFBF;
    font-family: 'Monserrat', sans-serif;
    font-size: 2.5rem;
}

h3 {
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    font-size: 2.8rem;
    color: #66BFBF;
    font-weight: normal;
    /* line-height: 2; */
}

.middle {
    height: 200px;
    width: 200px;
    background-color: red;
}

.bottom {
    height: 200px;
    width: 200px;
    background-color: blue;
    position: relative;
}

.bottom-cloud {
    position: absolute;
    left: 300px;
    bottom: 300px;
}

.top-cloud {
    position: absolute;
    right: 300px;
    top: 50px;
}

.list {
    text-align: left;
    position: relative;
    left: 15rem;
    width: 70%;
    margin-bottom: 100px;
    /* line-height: 2; */
}

.skill-row {
    width: 50%;
    margin: 100px auto;
}

.computer-class {
    width: 25%;
    float: left;
}

.chilli-img {
    width: 25%;
    float: left;
}

如有任何帮助，我们将不胜感激。我使用杀虫剂来了解 div 的位置。

Answer 1

HTML:

<div class="skills">
    <h2>My Skills.</h2>
    <div class="skill-row">
      <div class="left-panel">
        <img class="computer-class" src="/image/computer.png" alt="Computer">
      </div>
      <div class="right-panel">
        <h3>Makers Academy</h3>
        <ul class="list">
          <li>Agile Principles and Extreme Programming (XP) Values</li>
          <li>HTML, CSS and JavaScript</li>
          <li>Pair Programming </li>
          <li>Independent and Remote Learning</li>
          <li>Problem Solving</li>
          <li>OOP, TDD, SOLID, MVC, DDD</li>
          <li>JavaScript ES6</li>
          <li>SQL, PostgreSQL</li>
          <li>MongoDB</li>
          <li>Swift</li>
        </ul>
      </div>
    </div>
  </div>

并替换您的 CSS:

    *{
      box-sizing: border-box;
    }

    h2 {
      color: #66BFBF;
      font-family: 'Monserrat', sans-serif;
      font-size: 2.5rem;
    }

    h3 {
      font-family: 'Montserrat', sans-serif;
      font-size: 2.8rem;
      color: #66BFBF;
      font-weight: normal;
      /* line-height: 2; */
    }

    ul{
      padding-left: 20px;
    }

    img{
      width:100%;
    }

    .skill-row{
      overflow:hidden;
    }

    .left-panel, .right-panel{
      float:left;
    }

    .left-panel{
      width:30%;
    }

    .right-panel{
      width:70%;
      padding-left:20px;
    }