Поместите галерею изображений вертикально, а не горизонтально в HTML

Сначала я хочу предупредить вас, я довольно новичок в HTML, поэтому простите меня заранее, если я задаю глупые вопросы! Я начал этот класс, где нам нужно создать наш собственный сайт, и они научат нас создавать простую галерею изображений, но только по горизонтали. Однако, чтобы создать лучший дизайн для моего сайта, я бы хотел создать галерею изображений, но вертикально. Как я могу сделать? Я видел несколько ответов в другом месте, но мы еще не изучили какие-либо сложные вещи, поэтому я ничего не понял! Вот что я написал на моем 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; 
}

источник

2015-06-01 Lisa

Там нет такого свойства, как float: center; использования display: block, если вы хотите иметь их отображать по вертикали.

Как так:

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

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

Если вы хотите изображения сосредоточенные или выровненные вправо просто использовать text-align свойство

источник

2015-06-01 12:04:30 odedta

Спасибо это сработало! Однако он остается посередине страницы. Если я не могу использовать float, какое свойство мне нужно использовать для размещения галереи слева или справа от страницы? – Lisa

'float: left;' или 'float: right;' или 'text-align: left;' или 'text-align: right;' – odedta

Если я использую 'float: left;' он помещает галерею горизонтально и ' tex-align: left' ничего не делает:/ – Lisa

Поместите галерею изображений вертикально, а не горизонтально в HTML

ответ

Смежные вопросы