높이가 다른 격자 이미지

내 포트폴리오 사이트의 눈금 레이아웃을 만들려고합니다. 온라인으로 작업하는 데 문제가 있습니다. 나는 그것이하지만, 잘 보면 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는 당신에게 원하는 결과를 제공 할 것입니다. "cols"클래스에는 4 개의 div가 있으며 4 개의 div는 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

고맙다 @ 잭, 나는 아주 웹 사이트를 만들기에 새로운 .. 요점은 내가 이미지가 동일한 높이를 갖고 싶지 않다는 것입니다. 결국 헤더에 로고가있는 3 개의 컬럼 중심이 필요합니다. 코드에서 테이블 부분을 삭제했습니다. 포지셔닝은 CSS에서 가장 좋습니다. – Kvvliet

맞습니다. 귀하의 진술에서, 너비는 같지만 높이가 같습니까? – Jacques

네 맞습니다. 일종의 pinterest 느낌이지만 중심. – 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

높이가 다른 격자 이미지

답변

관련 문제