响应式定位图标

Question

我正在构建一个响应式网站，现在有 3 个图标并排放置。我希望它们在最大的断点处彼此相邻，但当我添加文本时它们不会那样做。

#diensten {
  text-align: center;
  height: 700px;
  background-color: #FFF;
  position: relative;
}

#diensten h3 {
  font-family: "helvetica";
  font-size: 30px;
  color: #0000;
  padding-top: 20px;
}

#diensten p {
  padding-top: 30px;
}

#icons {
  margin: auto;
  display: block;
  text-align: center;
  font-family: "Helvetica";
}

#icons h3 {
  margin: auto;
  display: block;
  text-align: center;
  font-size: 24px;
}

.icon1,
.icon2,
.icon3 {
  padding: 0px 150px 0px 150px;
  margin-top: 180px;
  display: inline-block;
}

.icon1 img,
.icon2 img,
.icon3 img {
  width: 200px;
}


/* Desktop */

@media (max-width: 1820px) {
  .icon1,
  .icon2,
  .icon3 {
    padding: 0px, 100px, 0px, 100px;
  }
}


/* iPads (portrait and landscape) */

@media (min-width: 768px) and (max-width: 1024px) {}

<div id="icons">
  <div class="icon1">
    <img src="Images/browser.svg">
    <h3>.Net WebApps</h3>
    <p>Met een .Net webapp <br>kunt u via het internet <br>eenvoudig uw data aanpassen <br>en opslaan in een database. <br>de informatie i <br>computerprogramma's wordt <br>voornamelijk binnen organisaties gebruikt.</p>
  </div>
  <div class="icon2"><img src="Images/database.svg"></div>
  <div class="icon3"><img src="Images/stopwatch.svg"></div>

当我构建它时，它是如何工作的？我是否必须更改填充或其他内容？ This is what it does I want them next to each other, and on smaller devices under each other

Answer 1

设置 .icon 容器上的 width，而不是图像，以包含容器的宽度，这将包含图像和文本的宽度。然后图标将并排显示。

#diensten {
  text-align: center;
  height: 700px;
  background-color: #FFF;
  position: relative;
}

#diensten h3 {
  font-family: "helvetica";
  font-size: 30px;
  color: #0000;
  padding-top: 20px;
}

#diensten p {
  padding-top: 30px;
}

#icons {
  margin: auto;
  display: block;
  text-align: center;
  font-family: "Helvetica";
}

#icons h3 {
  margin: auto;
  display: block;
  text-align: center;
  font-size: 24px;
}

.icon {
  display: inline-block;
  vertical-align: top;
  max-width: 200px;
}

.icon img {
  display: block;
  max-width: 100%;
}

<div id="icons">
  <div class="icon1 icon">
    <img src="https://placeholdit.imgix.net/~text?txtsize=19&txt=200%C3%97200&w=200&h=200">
    <h3>.Net WebApps</h3>
    <p>Met een .Net webapp <br>kunt u via het internet <br>eenvoudig uw data aanpassen <br>en opslaan in een database. <br>de informatie i <br>computerprogramma's wordt <br>voornamelijk binnen organisaties gebruikt.</p>
  </div>
  <div class="icon2 icon"><img src="https://placeholdit.imgix.net/~text?txtsize=19&txt=200%C3%97200&w=200&h=200"></div>
  <div class="icon3 icon"><img src="https://placeholdit.imgix.net/~text?txtsize=19&txt=200%C3%97200&w=200&h=200"></div>
</div>

Answer 2

迈克尔是对的。另一种选择是简单地调整垂直对齐方式。

.icon1, .icon2, .icon3 {
    padding: 0px 150px 0px 150px;
    margin-top: 180px;
    display: inline-block;
    vertical-align: top; <- this here
}

响应式定位图标

Responsive positioning icons

html

css

image

css-position

responsive