Сетка с разной высотой изображений

Я пытаюсь создать сетку для моего портфолио. У меня возникают проблемы с тем, чтобы он работал в Интернете. При попытке предварительного просмотра в Dreamweaver это выглядит просто отлично, но при загрузке он все испортил .. Пожалуйста, помогитеСетка с разной высотой изображений

http://www.kaspervanvliet.nl/index.html

HTML:

<div id="images-containter"> 
     <div class="col"> 
     <img src="images/k_Web-03.jpg"> 
      <img src="images/curriculum_new.jpg"> 
       <img src="images/Finnley's_2.jpg"> 
        <img src="images/Justme_1.jpg"> 
      </div>

CSS:

.images-containter { 
position: relative; 
width: auto; 
height: auto; 
} 

.images-containter img{ 
width: 350px; 
height: auto; 
background: #fffff; 
padding: 0px; 
margin: 15px; 
border: none; 
} 

.col { 
width: 350px; 
display: block; 
float: left; 
margin: 15px; 
vertical-align: top; 
align: center; 
}

источник

2013-07-30 Kvvliet

Вы не даете достаточно информации. Мы не можем вам помочь, если вы не укажете свой текущий код и что именно вы пытаетесь сделать. – FLX

Как это должно выглядеть? – Tdelang

@FC 'Извините, даже попытка поставить код вопроса была сложной: p – Kvvliet

Установите ширину и высоту ваших тегов изображений. Я предполагаю, что вы хотите, чтобы все выглядели одинаково. Это было бы лучшим выбором.

Ваш код: мои изменения

<div class="col"> 
     <img src="images/k_Web-03.jpg" **height="100" width="75"**> 
      <img src="images/curriculum_new.jpg" **height="100" width="75"**> 
       <img src="images/Finnley's_2.jpg" **height="100" width="75"**> 
        <img src="images/Justme_1.jpg" **height="100" width="75"**> 
      </div> 

     etc...

Это требует некоторого планирования с вашей стороны, но вы могли бы просто позволить им нажать на изображение и увидеть полное представление. В противном случае у вас будут разные изображения с разными пропорциями, и он никогда не будет выглядеть так хорошо, как вы этого хотите.

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

EDIT * *

Ниже HTML/CSS даст вам желаемый результат. Есть 4 divs с классом «cols», что 4 divs настроены на 4 столбца. Изображения внутри div будут складываться, равномерно распределенные сверху и снизу. Кроме того, высота будет автоматически регулироваться в зависимости от ширины, которая ограничена 230px.

Сообщите мне, если вам нужно что-нибудь еще.

<!doctype html> 
<html> 
<head> 
<style> 
.wrap{ 
    width:960px; 
    margin:0 auto; 
} 

.cols{ 
    width:230px; 
    padding:5px; 
    float:left; 
} 

.cols img{ 
    width:230px; 
    display:block; 
    margin:5px 0; 
} 

</style> 
</head> 
<body> 
<div class="wrap"> 
    <div class="cols"> 
     <img src="images/k_Web-01.jpg"> 
     <img src="images/k_Web-02.jpg"> 
     <img src="images/k_Web-03.jpg"> 
    </div> 
    <div class="cols"> 
     <img src="images/k_Web-04.jpg"> 
     <img src="images/k_Web-05.jpg"> 
     <img src="images/k_Web-06.jpg"> 
    </div> 
    <div class="cols"> 
     <img src="images/k_Web-07.jpg"> 
     <img src="images/k_Web-08.jpg"> 
     <img src="images/k_Web-09.jpg"> 
    </div> 
    <div class="cols"> 
     <img src="images/k_Web-10.jpg"> 
     <img src="images/k_Web-11.jpg"> 
     <img src="images/k_Web-12.jpg"> 
    </div> 
</div> 
</body> 
</html>

источник

2013-07-30 15:27:33 Jacques

Спасибо @Jack, я очень новичок в создании веб-сайтов. Дело в том, что я не хочу, чтобы изображения имели одинаковую высоту. В конце концов я хочу, чтобы 3 столбца центра с логотипом в заголовке. Я удалил часть таблицы в коде. Позиционирование лучше всего в CSS? – Kvvliet

Это правильно. Итак, из вашего заявления вы хотите иметь одинаковую ширину, но разные высоты? – Jacques

Да, это правильно. Вид пронзительного ощущения, но сосредоточенный. – Kvvliet

Вы также можете использовать css для установки высоты и ширины один раз. Попробуйте это:

HTML:

<div class="img_container"> 
    <div class="port"><img src="images/..."></img></div> 
    <div class="land"><img src="images/..."></img></div> 
</div>

CSS:

.img_container { 
    width: 250px; 
    height: 250px; 
    background-color:grey; 
} 
.port { 
    width: 100px; 
    height: 200px; 
} 
.land { 
    width: 200px; 
    height: 100px; 
}

Это лучше, потому что вы режете стиль от кода.

источник

2013-07-30 15:41:33 ray

Сетка с разной высотой изображений

ответ

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