Question

嗨我需要让这些图像显示在每个图像旁边，并留在主内容div中，继承代码......

HTML

<span class="images">
        <img id="gpu1" src="img/780.jpg">
        <div id="gpu1text">
            Nvidias last gen GPU's are going at a ridiculus price!
        </div>

        <img id="win8" src="img/win8.jpeg">
        <div id="win8text">
            Windows 8.1 going cheap due to the Windows 10 announcment!
        </div>

        <img id="win8" src="img/win8.jpeg">
        <div id="win8text">
            Windows 8.1 going cheap due to the Windows 10 announcment!
        </div>
    </span>

CSS

#gpu1 {
width: 200px;
height: 200px;
padding: 15px;
border: 2px;
border-color: #e2e2e2;
border-radius: 10%;
}

#gpu1text {
width: 200px;
padding-left: 15px;
}

#win8 {
width: 200px;
height: 200px;
padding: 15px;
border: 2px;
border-radius: 10%;
}

#win8text {
width: 200px;
padding-left: 15px;
}

.images {
display: inline-block;

}

在此先感谢我对网络开发和本论坛的新手，对任何错误感到抱歉。此外，我确实寻找其他答案，但解决方案对我没有用。

顺便说一句，两张win8图片只是占位符，我会更改后面的第二张图片，如果有人想知道的话，这是大学作业。

Answer 1

您需要通过将图像的每个实例和文本包装在另一个div中来稍微修改HTML结构，然后将该div的display属性设置为inline-block。这样做可以成功地将所有图像对齐在一行中。

以下是一个例子：

＆＃13;

#gpu1 {
    width: 200px;
    height: 200px;
    padding: 15px;
    border: 2px;
    border-color: #e2e2e2;
    border-radius: 10%;
}
#gpu1text {
    width: 200px;
    padding-left: 15px;
}
.imageholder {
    display: inline-block;
    vertical-align: top;
}
#win8 {
    width: 200px;
    height: 200px;
    padding: 15px;
    border: 2px;
    border-radius: 10%;
}
#win8text {
    width: 200px;
    padding-left: 15px;
}
.images {
    display: inline-block;
}

＆＃13;

<div class="images">
    <div class="imageholder">
        <img id="gpu1" src="img/780.jpg">
        <div id="gpu1text">Nvidias last gen GPU's are going at a ridiculus price!</div>
    </div>
    <div class="imageholder">
        <img id="win8" src="img/win8.jpeg">
        <div id="win8text">Windows 8.1 going cheap due to the Windows 10 announcment!</div>
    </div>
    <div class="imageholder">
        <img id="win8" src="img/win8.jpeg">
        <div id="win8text">Windows 8.1 going cheap due to the Windows 10 announcment!</div>
    </div>
</div>

＆＃13;

<强> jsFiddle Demo

Answer 2

检查此代码：http://jsfiddle.net/anc9uL7y/1

我刚刚封装了一些东西，并将float：left属性添加到容器div。

HTML：

<div class="images">
        <div id="gpu1text" class="imageHolder">
            <img id="gpu1" src="img/780.jpg"/>
            <span>Nvidias last gen GPU's are going at a ridiculus price!</span>
        </div>


        <div id="win8text" class="imageHolder">
            <img id="win8" src="img/win8.jpeg"/>
            <span>Windows 8.1 going cheap due to the Windows 10 announcment!</span>
        </div>


        <div id="win8text" class="imageHolder">
            <img id="win8" src="img/win8.jpeg"/>
            <span>Windows 8.1 going cheap due to the Windows 10 announcment!</span>
        </div>
    </div>

CSS：

 #gpu1 {
    width: 200px;
    height: 200px;
    padding: 15px;
    border: 2px;
    border-color: #e2e2e2;
    border-radius: 10%;
    }

    #gpu1text {
    width: 200px;
    padding-left: 15px;
    }

    #win8 {
    width: 200px;
    height: 200px;
    padding: 15px;
    border: 2px;
    border-radius: 10%;
    }

    #win8text {
    width: 200px;
    padding-left: 15px;
    }

    .images {
    display: inline-block;
    }    
div.imageHolder {
    float: left;
}

Answer 3

你需要将整个html封装到正确的div中，一旦你这样做，你必须向左浮动保存图像和文本的块。还给它一个盒子大小的属性到边框...

此外，我清理了各种ID的不必要的CSS ...我将其更改为类以重用代码

代码段如下

＆＃13;

.gpu1 {
  width: 100%;
  height: 200px;
  padding: 15px;
  border: 2px;
  border-color: #e2e2e2;
  border-radius: 10%;
  background: red;
  box-sizing: border-box;
}
#gpu1text {
  width: 100%;
  padding-left: 15px;
}
.images {
  width: 100%;
}
.block {
  background: #cecece;
  float: left;
  width: 200px;
  margin: 2px;
}

＆＃13;

<div class="images">
  <div class="block">
    <img class="gpu1" src="img/780.jpg" />
    <div class="gpu1text">Nvidias last gen GPU's are going at a ridiculus price!</div>
  </div>
  <div class="block">
    <img class="gpu1" src="img/win8.jpeg" />
    <div class="gpu1text">Windows 8.1 going cheap due to the Windows 10 announcment!</div>
  </div>
  <div class="block">
    <img class="gpu1" src="img/win8.jpeg" />
    <div class="gpu1text">Windows 8.1 going cheap due to the Windows 10 announcment!</div>
  </div>
</div>

＆＃13;

希望这有帮助

需要将图像显示在彼此旁边

3 个答案: