html - 将两列与图像和文本并排放置

Question

大家好，目前我有以下内容:

.iconcontainer.first, .iconcontainer.second {
    display: inline-block;
}
.iconcontainer img {
    display: block;
    margin: 0 auto;
    text-align: center;
    width:50%;
    height:50%;
}
p {
    text-align: center;
    font-family:'Lato', sans-serif;
    font-weight: 400;
}
.fullhome {
    background-color: #FEF1D9;
    height: 100%;
}

<div class="fullhome">
    <div class='fulliconcontainer'>
        <div class='iconcontainer first'>
            <img class='homeicons1' src="http://localyz.com/wp-content/uploads/2014/09/local-seo-reviews-icon.png">
            <p>I want this under first image</p>
        </div>
    </div>
    <div class='iconcontainer second'>
        <img class='homeicons1' src="http://www.pd4pic.com/images800_/flat-keyboard-theme-typing-icon-types.png">
        <p>I want this under second image</p>
    </div>
</div>

我想做的是将 iconcontainer1 和 iconcontainer2 中的内容并排放置，以创建两列的效果。由于某种原因，iconcontainer2 掉到了底部。有谁知道如何解决这一问题？我认为 inline-block 可以解决这个问题。

Answer 1

具有 inline 或 inline-block 的两个元素之间始终有一个空格。您可以通过执行 float: left 来 float 这两个元素。

如果您想使用inline-block，请确保删除space或newline以删除它们之间的空格。

根据您的情况，您必须这样做:

<div class='iconcontainer first'>
    <img class='homeicons1' src="http://localyz.com/wp-content/uploads/2014/09/local-seo-reviews-icon.png">
    <p>I want this under first image</p>
  </div><div class='iconcontainer second'>
  <img class='homeicons1' src="http://www.pd4pic.com/images800_/flat-keyboard-theme-typing-icon-types.png">
  <p>I want this under second image</p>
</div>

更新:

没有注意到您将 50% 放入 img 元素中，这是错误的。您应该将其放在 .iconcontainer.first、.iconcontainer.second 容器上。

你的最终 CSS 应该是这样的:

.iconcontainer.first, .iconcontainer.second{
  display: inline-block;
  width:50%;
  height:50%;
}

.iconcontainer img {
  display: block;
  margin: 0 auto;
  text-align: center;
  width: 100%;
  height: 100%;
}

p {
  text-align: center;
  font-family: 'Lato', sans-serif;
  font-weight: 400;
}

.fullhome{
  background-color: #FEF1D9;
  height: 100%;
}

工作中Fiddle