html - 在一行中格式化两个 div 和两个图像

Question

我有两个 ul 列表，我将它们包装在 div 中，我希望它们并排放置。我想在每个标题旁边 float 一个小图标。下面是我到目前为止的代码。它看起来在窗口较大时找到，但当窗口较小时，第二个列表被推到图标下方，然后图标和列表都被推到第一个列表下方。我认为我的 css 格式不是很好，因为理想情况下我希望在屏幕不够宽时将第二个列表和图标一起推到第一个列表下方。我应该怎么做？

这是我的 jsfiddle https://jsfiddle.net/hw30en5z/2/

#bullet-title {
  font-family: 'Oswald';
  color: #004080;
  font-size: 22px;
  letter-spacing: 1px;
}
.table-icons {
  width: 50px;
  height: 50px;
  margin-right: 10px;
}
#split-half {
  padding-top: 2%;
  margin: 0 5% 0 5%;
}
#provide {
  float: left;
  width: 45%;
}
#drawings {
  float: left;
}
.list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.list li {
  padding-left: 1em;
  text-indent: -.7em;
}
.list li:before {
  content: "• ";
  color: #00AEEF;
}

<div id="split-half">
  <img class="table-icons" src="http://animations.fg-a.com/freeicons/1-check-icon-round-purple.png" style="float:left">
  <div id="provide">
    <p id="bullet-title">Title 1:</p>
    <ul class="list">
      <li>adss</li>
    </ul>
  </div>
  <img class="table-icons" src="http://animations.fg-a.com/freeicons/1-check-icon-round-purple.png" style="float:left">
  <div id="drawings">
    <p id="bullet-title">Title 2:</p>
    <ul class="list">
      <li>dasd</li>
    </ul>
  </div>
  <br style="clear:both;" />
</div>

Answer 1

当屏幕宽度不同时，您可以使用响应式 CSS 来格式化网站。为此，您使用 @media 标签。

有了这个，您可以做到一旦屏幕达到一定宽度，两个标题/列表都位于图像下方。

@media (max-width: 500px) {
    //css to style objects when screen is smaller than 500px
}

@media (min-width: 500px) {
    //css to style objects when screen is bigger than 500px
}

希望这对您有所帮助!