0
У меня на моем сайте 3 изображения, которые я пытаюсь показать бок о бок. Они так, как я исследовал, узнал и прочитал, поставил их вертикально, укладываясь друг на друга. Это не то, что я ищу.Отображение 3 ссылок изображения бок о бок
Мой вопрос: какой html или css мне не хватает, чтобы иметь возможность сделать это?
Мой CSS:
#imagestyle {
width:100%;
text-align:center;
padding:5px;
}
span {
display:inline-block;
margin:5px;
}
Мой HTML:
<div id="imagestyle">
<span><a href="http://dutchjohnresort.com/wp-content/uploads/2014/01/Kayak-Whitewater.jpg"><img alt="Kayak Whitewater rafting" src="http://dutchjohnresort.com/wp-content/uploads/2014/01/Kayak-Whitewater-150x150.jpg" width="150" height="150" /></a>
<p>Kayak</p>
</span>
<span><a href="http://dutchjohnresort.com/wp-content/uploads/2014/01/Raft-Whitewater.jpg"><img alt="Rafting Whitewater" src="http://dutchjohnresort.com/wp-content/uploads/2014/01/Raft-Whitewater-150x150.jpg" width="150" height="150" /></a>
<p>Inflatable Raft</p>
</span>
<span><a href="http://dutchjohnresort.com/wp-content/uploads/2014/01/Paddleboard-Whitewater.jpg"><img alt="Paddleboard Whitewater Rafting" src="http://dutchjohnresort.com/wp-content/uploads/2014/01/Paddleboard-Whitewater-150x150.jpg" width="150" height="150" /></a>
<p>Paddleboard</p>
</span>
</div>
Я не могу понять это. Любая помощь будет принята с благодарностью.
Кроме того, http://www.dutchjohnresort.com/rafting/ - это сайт, если это помогает.
Заранее благодарен!
EDIT: Весь код, который я ввел здесь, был скопирован с моего сайта. Я не знаю, как все по-другому. Спасибо за ответы. Я буду работать над очисткой и посмотреть, поможет ли это.
Вышеприведенный код работает так, как вы хотите, я верю: http://jsfiddle.net/KT3em/. Поскольку вы устанавливаете элемент контейнера в 'width: 100%', вы должны проверить родительский элемент контейнера, чтобы убедиться, что он не заставляет узкий макет. – Jasper
Оооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооаеееееееееееееееееееееееееееееееееееееееееееееееееееееееееееееееееееееееееееееееееееееееееееееееееееееееееееееееееееееееееееееееееееееееееееееееееееееее Просто очистите свой HTML. У вас есть '
' теги между '' тегами, которые будут заставлять новые строки ... У вас также есть теги, которые неправильно вложены. Это заставляет браузеры отображать ваш HTML по-другому, чем вы ожидаете. – Jasper
В ответ на ваши изменения. Если вы используете систему управления контентом, это может быть вашей проблемой. Редакторы WYSISYG часто делают предположения и обновляют ваш HTML-код. Например. возможно, теги '
' добавляются из-за редактора WYSISYG. – Jasper