时间戳

首页 > 解决方案 > 如何根据浏览器的宽度调整所有对象的大小？

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

问题描述

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

欢迎所有帮助。

提前致谢。

对于喜欢 jsfiddle 演示的人：

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>

标签： htmlcss

解决方案

看起来您正在使用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

我希望这有帮助。干杯!

推荐阅读