Получение изображений Inline Horizontally с дескрипторами

58
6

HTML/CSS: Я пытаюсь поместить набор изображений в горизонтальную строку на веб-странице.

У меня возникает проблема, когда я представляю текстовый дескриптор под каждым изображением. В результате, когда дескриптор достаточно велик, чтобы его нужно было переносить на новую строку, конкретное изображение немного смещается.

Я установил это в jsfiddle:

http://jsfiddle.net/mapbpk/8Rq5N/

вот код html/css:

<div class = "pNmPicContainer" id = "Picture" >
<h3 class="clearFloat"><center><strong>Picture Palette</strong></center></h3>

<div class = "pNmPicImageSlot" id="picSlot_0"
style="width:145px; height:100px">

<img src="http://localhost:9000/HomeVu1//HomeVu1/Pictures/Oak House - rear.jpg"
width="56.700000751018464"
height="37.800000500678976"
alt="Oak House - rear.jpg"
title="Oak House - rear.jpg" class = "drag" id = "dropObj_1"/>
<br>Back Garden

</div> <!-- pNmPicImageSlot -->

<div class = "pNmPicImageSlot" id="picSlot_1"
style="width:145px; height:100px">

<img src="http://localhost:9000/HomeVu1//HomeVu1/Pictures/Oak House - dining room.jpg"
width="56.700000751018464"
height="37.800000500678976"
alt="Oak House - dining room.jpg"
title="Oak House - dining room.jpg" class = "drag" id = "dropObj_2"/>
<br>Dining Room

</div> <!-- pNmPicImageSlot -->

<div class = "pNmPicImageSlot" id="picSlot_2"
style="width:145px; height:100px">

<img src="http://localhost:9000/HomeVu1//HomeVu1/Pictures/OakHouse-Garden.jpg"
width="56.700000751018464"
height="37.800000500678976"
alt="OakHouse-Garden.jpg"
title="OakHouse-Garden.jpg" class = "drag" id = "dropObj_3"/>
<br>Large Garden

</div> <!-- pNmPicImageSlot -->

<div class = "pNmPicImageSlot" id="picSlot_3"
style="width:145px; height:100px">

<img src="http://localhost:9000/HomeVu1//HomeVu1/Pictures/Oak House - Lounge.jpg"
width="56.700000751018464"
height="37.800000500678976"
alt="Oak House - Lounge.jpg"
title="Oak House - Lounge.jpg" class = "drag" id = "dropObj_4"/>
<br>Very Very Very Spacious Living Room

</div> <!-- pNmPicImageSlot -->

<div class = "pNmPicImageSlot" id="picSlot_4"
style="width:145px; height:100px">

<img src="http://localhost:9000/HomeVu1//HomeVu1/Pictures/OH Bed 01.JPG"
width="56.700000751018464"
height="37.800000500678976"
alt="OH Bed 01.JPG"
title="OH Bed 01.JPG" class = "drag" id = "dropObj_5"/>
<br>Main Bedroom

</div> <!-- pNmPicImageSlot -->

<div class = "pNmPicImageSlot" id="picSlot_5"
style="width:145px; height:100px">

<img src="http://localhost:9000/HomeVu1//HomeVu1/Pictures/Oak House - Bed 2.jpg"
width="56.700000751018464"
height="37.800000500678976"
alt="Oak House - Bed 2.jpg"
title="Oak House - Bed 2.jpg" class = "drag" id = "dropObj_6"/>
<br>Bedroom 2

</div> <!-- pNmPicImageSlot -->

<div class = "pNmPicImageSlot" id="picSlot_6"
style="width:145px; height:100px">

<img src="http://localhost:9000/HomeVu1//HomeVu1/Pictures/Oak House - bed 3.jpg"
width="56.700000751018464"
height="37.800000500678976"
alt="Oak House - bed 3.jpg"
title="Oak House - bed 3.jpg" class = "drag" id = "dropObj_7"/>
<br>Bedroom 3

</div> <!-- pNmPicImageSlot -->

<div class = "pNmPicImageSlot" id="picSlot_7"
style="width:145px; height:100px">

<img src="http://localhost:9000/HomeVu1//HomeVu1/Pictures/Oak House - conservatory.jpg"
width="56.700000751018464"
height="37.800000500678976"
alt="Oak House - conservatory.jpg"
title="Oak House - conservatory.jpg" class = "drag" id = "dropObj_8"/>
<br>Conservatory

</div> <!-- pNmPicImageSlot -->

<div class = "pNmPicImageSlot" id="picSlot_8"
style="width:145px; height:100px">

<img src="http://localhost:9000/HomeVu1//HomeVu1/Pictures/Oak House - lawn.jpg"
width="56.700000751018464"
height="37.800000500678976"
alt="Oak House - lawn.jpg"
title="Oak House - lawn.jpg" class = "drag" id = "dropObj_9"/>
<br>Elegant Lawn

</div> <!-- pNmPicImageSlot -->

<div class = "pNmPicImageSlot" id="picSlot_9"
style="width:145px; height:100px">

<img src="http://localhost:9000/HomeVu1//HomeVu1/Pictures/Oak House - Front.jpg"
width="56.700000751018464"
height="37.800000500678976"
alt="Oak House - Front.jpg"
title="Oak House - Front.jpg" class = "drag" id = "dropObj_10"/>
<br>Driveway

</div> <!-- pNmPicImageSlot -->

<div class = "pNmPicImageSlot" id="picSlot_10"
style="width:145px; height:100px">

<img src="http://localhost:9000/HomeVu1//HomeVu1/Pictures/Oak House - front 2.jpg"
width="56.700000751018464"
height="37.800000500678976"
alt="Oak House - front 2.jpg"
title="Oak House - front 2.jpg" class = "drag" id = "dropObj_11"/>
<br>Front Garden

</div> <!-- pNmPicImageSlot -->

</div>

CSS:

.pNmPicContainer, .pNmVidContainer /* MAK */
{
background-color: #f0fff0;
/* background-image: url(../images/skin/database_add.png); */
/* background-repeat:repeat-x; */
padding: 1em 1em 1em 1em;
margin: 1em 1em 1em 1em;
width:auto; text-align:center; display:block;
}

.pNmPicImage /* MAK */
{
font-size: 0.6em;
margin-top:5px;
margin-bottom:5px;
margin-left:5px;
margin-right:5px;
background-color: transparent;
border-color: transparent;
padding: 1em 1em 1em 1em;
}

.pNmPicImageSlot , .pNmVidImageSlot
{
/* float:left; */
padding: 5px;

text-transform: none;
letter-spacing: normal;
/* padding: .3em .1em .2em .1em; */
display:inline-block;
/* background-image: url(../images/skin/Film0314.png); */

background-color:#a4dded
;

}

Приветствую ваши предложения?

-mike

спросил(а) 2014-03-18T18:26:00+04:00 6 лет, 7 месяцев назад
1
Решение
58

Свойство display: inline-block делает HTML-пространство чувствительным. Добавьте "vertical-align: top" в свой стиль pNmPicImageSlot, чтобы исправить его.

.pNmPicImageSlot , .pNmVidImageSlot {
/* float:left; */
padding: 5px;

text-transform: none;
letter-spacing: normal;
/* padding: .3em .1em .2em .1em; */
display:inline-block;
vertical-align: top;
/* background-image: url(../images/skin/Film0314.png); */

background-color:#a4dded;
}

ответил(а) 2014-03-18T19:15:00+04:00 6 лет, 7 месяцев назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема