Как я могу избежать перекрытия изображений другими элементами с помощью float, clear, position и т. Д. без использования JS?

#html #css

#HTML #css

Вопрос:

Это то, что у меня есть на данный момент, у меня также есть желаемый результат. Спасибо за помощь!

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

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

Желаемый результат:

Я новичок в сообществе, и если я сделал что-то не так, задавая вопрос, пожалуйста, скажите мне. Спасибо за вашу будущую помощь!

1. К вашему сведению, единственным допустимым дочерним элементом ul является li . У вас есть div ‘s.

2. Я вижу, я новичок в HTML и CSS, я делаю какие-то ошибки noob. Спасибо, что указали на это!

Ответ №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>