Question

当我调整网站大小时，它们会跌倒，但是即使我调整浏览器大小，我也希望它们仍然彼此相邻。有人可以看看这个，看看我能做些什么。

欢迎所有帮助。

谢谢。

对于喜欢jsfiddle演示的人：

对于那些喜欢在网站上使用代码的人：

#box h2 {
  font-family: 'Open Sans', sans-serif;
  font-size: 26px;
  color: #888;
  margin-bottom: 10px;
  font-weight: 700;
  text-align: left;
  text-transform: uppercase;
  text-decoration: none;
}

.text-1 {
  max-width: 900px;
  margin-right: 130px;
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
  color: #888;
  text-align: left;
}

.text-1 p {
  margin-top: 30px;
  font-size: 22px;
  line-height: 36px;
  text-align: left;
}

#box {
  background-color: white;
  display: inline-block;
}

.first {
  width: 300;
  margin-top: 5px;
  max-height: 200px;
  box-shadow: 2px;
  float: left;
  margin: 30px;
}

.second {
  width: 300px;
  margin-top: 5px;
  max-height: 200px;
  box-shadow: 2px;
  float: left;
  margin: 30px;
}

.third {
  width: 300px;
  margin-top: 5px;
  max-height: 200px;
  box-shadow: 2px;
  float: left;
  margin: 30px;
}

.third p {
  font-family: 'Open Sans', sans-serif;
  font-size: 18px;
  line-height: 32px;
  color: #888;
  font-weight: 300;
}

.first p {
  font-family: 'Open Sans', sans-serif;
  font-size: 18px;
  line-height: 32px;
  color: #888;
  font-weight: 300;
}

.second p {
  font-family: 'Open Sans', sans-serif;
  font-size: 18px;
  line-height: 32px;
  color: #888;
  font-weight: 300;
}

h3 {
  font-size: 26px;
  font-weight: 700;
  color: #888;
  line-height: 30px;
  text-transform: uppercase;
}

.parallax {
  /* The image used */
  background-image: url('/assets/image/parallax.jpg');
  /* Full height */
  height: 250px;
  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

<div id="box">
  <h2>Vår process</h2>
  <div class="text-1">
    <p>VI HJÄLPER DIG MED ALLT.</p>
  </div>
  <div class="first wow fadeInLeft"><img src="https://i.ibb.co/tYxVLfz/arende.png">
    <h3>KONTAKT</H3>
    <p>Kontakta oss genom telefon eller vårat kontaktformulär på hemsidan.</p>
  </div>
  <div class="second wow fadeInUp"><img src="https://i.ibb.co/tYxVLfz/arende.png">
    <H3>GRANSKAN</H3>
    <P>Vi går igenom ditt ärende och ser om vi har möjlighet och utföra jobbet.</P>
  </div>
  <div class="third wow fadeInRight"><img src="https://i.ibb.co/tYxVLfz/arende.png">
    <H3>LEVERANS</H3>
    <P>Vi kommer hem till dig och fixar det du behöver hjälp med.</P>
  </div>

</div>

Answer 1

您似乎正在使用float: left来定位元素。您将看到float属性的预期行为。将物品冲洗到一边，直到无法容纳为止，在这种情况下物品会掉落。

我做了一个更新的小提琴，删除了float: left样式并将.wow元素包装在容器中。我已将该容器赋予属性display: flex。默认的行为是并排设置子元素（.wow框），并在浏览器调整大小时相应地调整它们的大小。仅当您明确设置要包装的项目时，它们才会被包装。

.container {
  display: flex;
}

我不确定您最终的结果应该是什么样子，但我把这个小提琴放在一起，希望对您有所帮助。 http://jsfiddle.net/du4tyrb0/5/

您可以在此处了解有关Flexbox的更多信息：
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox

我希望这会有所帮助。干杯！

Answer 2

您可以使用Bootsrap，CSS grid，CSS Flexbox ...;参见responsive design

选择一个并进行研究。

如何根据浏览器的宽度调整所有对象的大小？

2 个答案: