Question

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

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
}

希望这有帮助！

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

1 个答案: