Question

我是HTML和CSS的新手。我正在创建一个页面，我将把它插入我的Wordpress网站thoughtprojekt.com。我尝试了其他任何地方来实现我想要的但却无法实现的目标。

我编码的标题在下面没问题。

p.h1{
padding-top:75px; 
padding-bottom: 25px;
}

a.header{
text-transform: uppercase;
text-align: center; 
font-weight: normal;
text-decoration: none;
display:block;
color: #000000;
font-size:50px;
font-family: 'Lato Light', sans-serif;
line-height:50px;
letter-spacing:15px;
}
</style>

</head>
<p class ="h1" align="center">&nbsp;<body><a class="header" href="http://thoughtprojekt.com">Thought Projekt</font></a>

现在我想放置64px x 64px（30张图片），正好在中间和正下方＃34;思考Projekt＆＃34;。连续应该只有5个图像，总共有6行。我尝试过填充，但由于图像也有超链接，因此会留下可点击的空格。

有人可以指导我如何开始放置图像吗？

由于

Answer 1

我建议你需要制作一个整个div，所有图像都会进入。使用该div，你将把6个div放在另一个下面，在每个div中，你放置每个图像彼此相邻。

HTML代码如下所示：

<head>
    <link type="text/css" rel="stylesheet" href="images.css">
</head>
<body>
    <div class="container">
      <div class="row">
        <img src="your_image.png">
        <img src="your_image.png">
        <img src="your_image.png">
        <img src="your_image.png">
        <img src="your_image.png">
      </div>
      <div class="row">
        <img src="your_image.png">
        <img src="your_image.png">
        <img src="your_image.png">
        <img src="your_image.png">
        <img src="your_image.png">
      </div>
      <div class="row">
        <img src="your_image.png">
        <img src="your_image.png">
        <img src="your_image.png">
        <img src="your_image.png">
        <img src="your_image.png">
      </div>
      <div class="row">
        <img src="your_image.png">
        <img src="your_image.png">
        <img src="your_image.png">
        <img src="your_image.png">
        <img src="your_image.png">
      </div>
      <div class="row">
        <img src="your_image.png">
        <img src="your_image.png">
        <img src="your_image.png">
        <img src="your_image.png">
        <img src="your_image.png">
      </div>
      <div class="row">
        <img src="your_image.png">
        <img src="your_image.png">
        <img src="your_image.png">
        <img src="your_image.png">
        <img src="your_image.png">
      </div>
    </div>
</body>

然后是CSS：

//This is the images.css file located in the same folder with html file
.container .row img{
  float: left;    //Each image will be next ot each other
  width: 64px;
  height: 64px;
}

.row{
  display: block;
  height: 64px;
}

.container{
    width: 320px;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    margin: auto 0px;
    float: right;
}

我相信这就是你要求的。希望它有所帮助！

PS：你是stackoverflow的新手吗？欢迎！：）

Answer 2

您可以使用div为行宽度设置限制。并且，对于浮动项目，您放置图像......

Example

HTML

<div class="row">
  <div class="image"><img src="#" alt="Image"/></div>
</div>

CSS

.row {
  max-width: 340px;
}

.image{
  width: 64px;
  height: 64px;
  float: left;
}

将图片放置在简单的网页中

2 个答案: