Question

首先我要警告你，我对HTML很新，所以如果我提出愚蠢的问题，请提前原谅我！我已经开始这个课程，我们需要创建自己的网站，他们教我们如何创建一个简单的图像库，但只是水平。但是，为了为我的网站创建更好的设计，我想垂直创建一个图库。我能怎么做？我在其他地方看到的答案很少，但我们还没有学到任何复杂的东西，所以我不明白一件事！这是我在HTML文档中写的内容：

<head>

<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>

<script src="http://media.mq.edu.au/mas240/js/gallery.js"></script>

</head>

<section>

<img src="images/th-dancestudio2.jpg" class="gallery" href="images/dancestudio2.jpg" />

<img src="images/th-dancestudio3.jpg" class="gallery" href="images/dancestudio3.jpg" />

<img src="images/th-dancestudio4.jpg" class="gallery" href="images/dancestudio4.jpg" />

<img src="images/th-dancestudio5.jpg" class="gallery" href="images/dancestudio5.jpg" />

</section>

以下是我在CSS文档中写的内容：

.gallery {
float: center;
margin-top: 30px;
margin-bottom: 20px;
border: 5px solid black;
border-radius: 15px;
}

Answer 1

如果您想让它们垂直显示，则float: center;使用display: block没有此属性。

像这样：

＆＃13;

.gallery {
    display: block;
    margin-top: 30px;
    margin-bottom: 20px;
    border: 5px solid black;
    border-radius: 15px;
    text-align: right;
}

＆＃13;

<section>

<img src="images/th-dancestudio2.jpg" class="gallery" href="images/dancestudio2.jpg" />

<img src="images/th-dancestudio3.jpg" class="gallery" href="images/dancestudio3.jpg" />

<img src="images/th-dancestudio4.jpg" class="gallery" href="images/dancestudio4.jpg" />

<img src="images/th-dancestudio5.jpg" class="gallery" href="images/dancestudio5.jpg" />

</section>

＆＃13;

如果您希望图像居中或右侧对齐，请使用text-align属性

在HTML

1 个答案: