Question

我想知道如何编辑此代码以显示这些图片并排放置，每个下载按钮居中并位于每张图片下方，如果有人知道如何编辑代码，我们将不胜感激。感谢。

我上传代码的网站链接，测试它可以在下面看到：

http://www.tekmillion.com/albums.html

.clearfix {
  clear: both;
}
.divWithBtn {
  float: left;
  text-align: center;
  padding: 10px;

}
.divWithBtn img,
.divWithBtn a{
  display: block;
  margin: 0 auto;
}

<HR>

<div class="container">
</br>
	<span class="textformat1"><center><b>Albums</b></span></center>
</br>

<center>
	<div class="clear">
		<div class="divWithBtn">
			<img src="images/london%20To%20Turkey%20-%20Front%20Cover.jpg" alt="london%20To%20Turkey%20-%20Front%20Cover" 					width="200" height="200">
		<a href="LONDON%202%20TURKEY%20VOL.1.zip">
			<img src="images/downloadbutton.png" alt="downloadbutton" width="150" height="50"></a>
		</div>
	<div class="divWithBtn">
		<img src="images/LONDON%20TO%20TURKEY%20VOLUME%202%20(FRONT%20COVER).jpg" alt="LONDON%20TO%20TURKEY%20VOLUME%202%20(FRONT		%20COVER)" width="200" height="200" border:none;>
			<a href="LONDON%202%20TURKEY%20VOL.2.zip">
		<img src="images/downloadbutton.png" alt="downloadbutton" width="150" height="50"></a>
	</div>
		<div class="divWithBtn">
			<img src="images/Love%20%26%20Hate%20Volume.1%20(Front%20Cover).JPG" alt="Love%20%26%20Hate%20Volume.1%20(Front					%20Cover)" width="200" height="200">
		<a href="LOVE%20%26%20HATE%20VOL.1.zip">
	<img src="images/downloadbutton.png" alt="downloadbutton" width="150" height="50"></a>
		</div>
	<div class="divWithBtn">
		<img src="images/Gurbet%20Eli%20Volume.1%20(Front%20Cover).JPG" alt="Gurbet%20Eli%20Volume.1%20(Front%20Cover)" width="200" 		height="200">
	<a href="GURBET%20ELI%20VOL.1.zip">
		<img src="images/downloadbutton.png" alt="downloadbutton" width="150" height="50"></a>
		</div>
	</div>
</center>
</br>

Answer 1

将以下css添加到您的代码中：

这个css将并排成像。

.divWithBtn {
    display: inline-block;
}

关注css将在图像下方生成下载按钮。

.divWithBtn > a {
    display: block;
}

希望它有所帮助。

注意：您在此处发布的当前css未应用。确保它已应用于您的html元素。检查css文件的路径。

Answer 2

将类“display_table”添加到外部div。

<div class="clear" class="display_table">

为“divWithBtn”类添加样式

.divWithBtn {
     float:left;
     text-align:center;
     margin: 0px 20px;
}

最后将div添加到图片代码

<div><img height="200" width="200" src="images/london%20To%20Turkey%20-%20Front%20Cover.jpg" alt="london%20To%20Turkey%20-%20Front%20Cover"></div>

Finall输出

<div class="clear" class="display_table">
  <div class="divWithBtn">
    <div><img height="200" width="200" src="images/london%20To%20Turkey%20-%20Front%20Cover.jpg" alt="london%20To%20Turkey%20-%20Front%20Cover"></div>
    <a href="LONDON%202%20TURKEY%20VOL.1.zip"> <img height="50" width="150" src="images/downloadbutton.png" alt="downloadbutton"></a> </div>
  <div class="divWithBtn">
    <div> <img height="200" width="200" src="images/LONDON%20TO%20TURKEY%20VOLUME%202%20(FRONT%20COVER).jpg" alt="LONDON%20TO%20TURKEY%20VOLUME%202%20(FRONT        %20COVER)" border:none;=""></div>
    <img height="50" width="150" src="images/downloadbutton.png" alt="downloadbutton"> </div>
  <div class="divWithBtn">
    <div><img height="200" width="200" src="images/Love%20%26%20Hate%20Volume.1%20(Front%20Cover).JPG" alt="Love%20%26%20Hate%20Volume.1%20(Front                   %20Cover)"></div>
    <a href="LOVE%20%26%20HATE%20VOL.1.zip"> <img height="50" width="150" src="images/downloadbutton.png" alt="downloadbutton"></a> </div>
  <div class="divWithBtn">
    <div><img height="200" width="200" src="images/Gurbet%20Eli%20Volume.1%20(Front%20Cover).JPG" alt="Gurbet%20Eli%20Volume.1%20(Front%20Cover)">
      <div> <a href="GURBET%20ELI%20VOL.1.zip"> <img height="50" width="150" src="images/downloadbutton.png" alt="downloadbutton"></a> </div>
    </div>
  </div>
</div>

<强>的CSS

.display_table { display: table; }
.divWithBtn { float: left; text-align: center; margin: 0px 20px; }

如何将这些照片并排放置？

2 个答案: