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来浮动这两个元素。

如果您想使用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

Answer 2

首先，<div class='fulliconcontainer'>在HTML中过早关闭，更正为了使两个<div class='iconcontainer'>成为兄弟姐妹。

inline-block也会渲染空格，有few ways来避免它，使用字体大小技巧是迄今为止最简单的。

＆＃13;

.fulliconcontainer {
    font-size: 0;
}
.iconcontainer.first, .iconcontainer.second {
    display: inline-block;
    vertical-align: top;
    font-size: 16px;
    width:50%;
    height:50%;
}
.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%;
}

＆＃13;

<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 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>
</div>

＆＃13;

或者您可以将它们设置为float而不是内联块。不要忘记clear the float。

＆＃13;

.fulliconcontainer {
    overflow: auto;
}
.iconcontainer.first, .iconcontainer.second {
    float: left;
    width:50%;
    height:50%;
}
.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%;
}

＆＃13;

<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 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>
</div>

＆＃13;

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

2 个答案: