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

在/usr/local/lib/ruby/gems/2.2.0/gems/bundler-1.14.5/lib/bundler/rubygems_ext.rb:45:in `full_gem_path': uninitialized constant Bundler::Plugin::API::Source (NameError) from /usr/local/Cellar/ruby/2.2.3/lib/ruby/2.2.0/rubygems/basic_specification.rb:145:in `block in full_require_paths' from /usr/local/Cellar/ruby/2.2.3/lib/ruby/2.2.0/rubygems/basic_specification.rb:144:in `map' from /usr/local/Cellar/ruby/2.2.3/lib/ruby/2.2.0/rubygems/basic_specification.rb:144:in `full_require_paths' from /usr/local/Cellar/ruby/2.2.3/lib/ruby/2.2.0/rubygems/basic_specification.rb:77:in `contains_requirable_file?' from /usr/local/Cellar/ruby/2.2.3/lib/ruby/2.2.0/rubygems/specification.rb:949:in `block in find_in_unresolved' from /usr/local/Cellar/ruby/2.2.3/lib/ruby/2.2.0/rubygems/specification.rb:949:in `each' from /usr/local/Cellar/ruby/2.2.3/lib/ruby/2.2.0/rubygems/specification.rb:949:in `find_all' from /usr/local/Cellar/ruby/2.2.3/lib/ruby/2.2.0/rubygems/specification.rb:949:in `find_in_unresolved' from /usr/local/Cellar/ruby/2.2.3/lib/ruby/2.2.0/rubygems/core_ext/kernel_require.rb:74:in `require' from /usr/local/lib/ruby/gems/2.2.0/gems/bundler-1.14.5/lib/bundler/plugin/api/source.rb:2:in `<top (required)>' from /usr/local/lib/ruby/gems/2.2.0/gems/bundler-1.14.5/lib/bundler/rubygems_ext.rb:45:in `full_gem_path' from /usr/local/Cellar/ruby/2.2.3/lib/ruby/2.2.0/rubygems/basic_specification.rb:145:in `block in full_require_paths' from /usr/local/Cellar/ruby/2.2.3/lib/ruby/2.2.0/rubygems/basic_specification.rb:144:in `map' from /usr/local/Cellar/ruby/2.2.3/lib/ruby/2.2.0/rubygems/basic_specification.rb:144:in `full_require_paths' from /usr/local/Cellar/ruby/2.2.3/lib/ruby/2.2.0/rubygems/specification.rb:1370:in `add_self_to_load_path' from /usr/local/Cellar/ruby/2.2.3/lib/ruby/2.2.0/rubygems/specification.rb:1283:in `activate' from /usr/local/Cellar/ruby/2.2.3/lib/ruby/2.2.0/rubygems/core_ext/kernel_gem.rb:67:in `block in gem' from /usr/local/Cellar/ruby/2.2.3/lib/ruby/2.2.0/rubygems/core_ext/kernel_gem.rb:66:in `synchronize' from /usr/local/Cellar/ruby/2.2.3/lib/ruby/2.2.0/rubygems/core_ext/kernel_gem.rb:66:in `gem' from /Users/GrandsonBoom/Desktop/brogrammer/Viafly-Server/bin/spring:12:in `<top (required)>' from bin/rails:3:in `load' from bin/rails:3:in `<main>'容器上设置width而不是图像，以包含容器的宽度，容器的宽度将包含图像和文本的宽度。然后图标将并排显示。

.icon

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

Answer 2

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

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

响应定位图标

2 个答案: