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

Answer 2

最简单的解决方案是将至少为图像宽度的左边距添加到列表中，或将列表overflow:auto或overflow:hidden赋予列表。如果使用后者，列表的宽度将自动缩小以为图像留出空间。

.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;
}

.computer-class+.list {
  margin-left: 25%;
  padding-left: 2em;
  width: auto;
}

.chilli-img {
    width: 25%;
    float: left;
}

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

.computer-class+.list {
  margin-left: auto;
  overflow: auto;
  padding-left: 2em;
  width: auto;
}

并非我的所有列表都环绕图片

2 个答案: