如何在不使用JS的情况下使用float，clear，position等来避免图像与其他元素重叠？

Question

这就是我现在所拥有的，我也发布了理想的结果。谢谢你的帮助！

＆＃13;

＆＃13;

#red {
  background-color: #CC0000;
  font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
  color: white;
  font-size: 20px;
  padding-bottom: 20px;
  padding-left: 20px;
}

#orange {
  background-color: #FF9900;
  font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
  color: white;
  padding-bottom: 20px;
  padding-left: 20px;
  padding-top: 20x;
  font-size: 20px;
}

#yellow {
  background-color: #FFCC00;
  font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
  color: white;
  padding-bottom: 20px;
  padding-left: 20px;
  padding-top: 20x;
  font-size: 20px;
}

#green {
  background-color: #009900;
  font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
  color: white;
  padding-bottom: 20px;
  padding-left: 20px;
  padding-top: 20x;
  font-size: 20px;
}

#blue {
  background-color: #3366CC;
  font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
  color: white;
  padding-bottom: 20px;
  padding-left: 20px;
  padding-top: 20x;
  font-size: 20px;
}

#violet {
  background-color: #9933CC;
  font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
  color: white;
  padding-bottom: 20px;
  padding-left: 20px;
  padding-top: 20x;
  font-size: 20px;
}

.List {
  padding-bottom: 20px;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 20px;
  margin-bottom: 20px;
  margin-left: 20px;
  margin-top: 20px;
  margin-bottom: 20px;
  color: white;
  width: 240px;
  float: left;
  background-color: #494949;
}

ul {
  list-style-type: none;
  font-size: 0;
}

li {
  display: inline-block;
}

＆＃13;

<div class="container">
  <div class="List">
    <p>Pick A Colour!</p>

    <ul>
      <div id="red">
        <li>
          <p>Red
            <img src="http://i.imgur.com/MY9op5q.png" alt="arrow" title="arrow" />
          </p>
        </li>
      </div>

      <div id="orange">
        <li>
          <p>Orange
            <img src="http://i.imgur.com/MY9op5q.png" alt="arrow" title="arrow" />
          </p>
        </li>
      </div>

      <div id="yellow">
        <li>
          <p>Yellow
            <img src="http://i.imgur.com/MY9op5q.png" alt="arrow" title="arrow" />
          </p>
        </li>
      </div>

      <div id="green">
        <li>
          <p>Green
            <img src="http://i.imgur.com/MY9op5q.png" alt="arrow" title="arrow" />
          </p>
        </li>
      </div>

      <div id="blue">
        <li>
          <p>Blue
            <img src="http://i.imgur.com/MY9op5q.png" alt="arrow" title="arrow" />
          </p>
        </li>
      </div>

      <div id="violet">
        <li>
          <p>Violet
            <img src="http://i.imgur.com/MY9op5q.png" alt="arrow" title="arrow" />
          </p>
        </li>
      </div>

    </ul>
  </div>

＆＃13;

＆＃13;

＆＃13;

期望的结果：

我是社区的新手，如果我在询问时做错了请告诉我。感谢您将来的帮助！

Answer 1

您可以大大减少生成此布局所需的代码量。无需多次重写相同的样式。 CSS可以跨多个元素重用。你的HTML也可以减少。

.List {
  padding: 20px;
  margin: 20px;
  color: white;
  width: 240px;
  background-color: #494949;
}

.List li {
  font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
  color: white;
  font-size: 20px;
  padding: 10px 20px;
  background: url(http://i.imgur.com/MY9op5q.png) no-repeat right center;
}

.List ul {
  list-style: none;
  font-size: 0;
  margin: 0;
  padding: 0;
}

#red {
  background-color: #CC0000;
}

#orange {
  background-color: #FF9900;
}

#yellow {
  background-color: #FFCC00;
}

#green {
  background-color: #009900;
}

#blue {
  background-color: #3366CC;
}

#violet {
  background-color: #9933CC;
}

<div class="container">
  <div class="List">
    <p> Pick A Colour! </p>
    <ul>
      <li id="red">
        Red
      </li>
      <li id="orange">
        Orange
      </li>
      <li id="yellow">
        Yellow
      </li>
      <li id="green">
        Green
      </li>
      <li id="blue">
        Blue
      </li>
      <li id="violet">
        Violet
      </li>
    </ul>
  </div>