HTML에서 4 개의 이미지를 2 * 2로 정렬하는 방법은 무엇입니까?

-1

아래 사진으로 표시 할 네 개의 이미지를 정렬하려고했습니다. 그러나 나는 각 행 다음에 공백을 가져왔다. 어떻게 제거 할 수 있습니까?HTML에서 4 개의 이미지를 2 * 2로 정렬하는 방법은 무엇입니까?

또한 네 개의 이미지가 만나는 내가 중간에 예를 들어 이미지의 작은 썸네일을 추가 할 수있는 방법은 무엇입니까?

이와 함께 이미지 위에 자막을 추가하려고합니다. 현재 이미지 아래에 표시됩니다. 이미지 위에 어떻게 추가 할 수 있습니까?

<!DOCTYPE html> 
<html> 
<body alink="ff0000" bgcolor="ffffff" link="0000ff" text="000000" vlink="800080"> 

<div> 
<div class="transbox" style="width: 50%; height=50%; float: left;"> 
<img src="https://s22.postimg.org/61txkvgch/Venture_Capital.jpg" width="100%" /> 
<div style="position: relative; top:50%; left:45%; width:200px; height:25px"> 
    <center> 
    <font color="Black" size="+2">Looking Into The Future</font> 
    </center> 
</div> 

<img src="https://s11.postimg.org/zf842w1mb/Real_Estate.jpg" width="100%" /> 
<div style=" text-align: center; vertical-align: middle;"> 
    <center> 
    <font color="Black" size="+2">correct one</font> 
    </center> 
</div> 
</div> 
</div> 

<div> 
<div class="transbox" style="width: 50%; height=50%; float: right;"> 
<img src="https://s18.postimg.org/acomst9gp/image.jpg" width="100%" /> 
<div style="position: relative; top:50%; left:45%; width:200px; height:25px"> 
    <center> 
    <font color="Black" size="+2">Looking Into The Future</font> 
    </center> 
</div> 

<img src="https://s13.postimg.org/8yima8xvb/Construction.jpg" width="100%" /> 
<div style="position: relative; top:50%; left:45%; width:200px; height:25px"> 
    <center> 
    <font color="Black" size="+2">Looking Into The Future</font> 
    </center> 
</div> 
</div> 
</div> 




</div></body> 
</html>

JSFiddle 링크 :

https://jsfiddle.net/8bL4qqr8/

출처

2016-09-15 Aaron Misquith

사용 영웅 이미지를 찾고 있던 것입니다. – Owner

body{ 
 
    background-color:"ffffff"; 
 
} 
 

 
.img-grid{ 
 
    width: 50%; 
 
    float:left; 
 
    height:400px; 
 
} 
 

 
.img-grid img{ 
 
    width :100%; 
 
    height:400px; 
 
} 
 
.caption{ 
 
    display :none; 
 
} 
 

 
.img-grid:hover .caption{ 
 
    text-align: center; 
 
    display:block; 
 
    background: #000; 
 
    color: #fff; 
 
    font-size:16px; 
 
    font-weight: bold; 
 
    margin-top: -100px; 
 
    padding: 10px; 
 
}

<div class="transbox img-grid"> 
 
    <img src="https://s22.postimg.org/61txkvgch/Venture_Capital.jpg" /> 
 
    <div class="caption"> 
 
      <p>Looking Into The Future</p> 
 
    </div> 
 
</div> 
 
<div class="transbox img-grid"> 
 
    <img src="https://s11.postimg.org/zf842w1mb/Real_Estate.jpg" /> 
 
    <div class="caption"> 
 
      <p>Looking into the future</p> 
 
    </div> 
 
</div> 
 
<div class="transbox img-grid"> 
 
    <img src="https://s18.postimg.org/acomst9gp/image.jpg" /> 
 
    <div class="caption"> 
 
      <p>Looking Into The Future</p> 
 
    </div> 
 
</div> 
 
<div class="transbox img-grid"> 
 
    <img src="https://s13.postimg.org/8yima8xvb/Construction.jpg" /> 
 
    <div class="caption"> 
 
      <p>Looking Into The Future</p> 
 
    </div> 
 
</div>

출처

2016-09-15 10:12:14 nmanikiran

당신은 당신의 HTML에서 사용되지 않는 물건을 많이 가지고있다. 이 링크, 텍스트 본문을 모두 사용하지 마십시오. 그렇지 않은 경우 <center> 또는 <font>이 아닙니다. 나는 flexbox로 원했던 내용을 간단하게 만들었습니다. 나는 당신의 코드를 조금 수정했다. 현재 위치 인 flexbox에 대한 브라우저 지원을 찾을 수 있습니다 :이 http://caniuse.com/#search=flexbox

body { 
 
    margin: 0; 
 
    padding: 0; 
 
    background-color: #FFFFFF; 
 
} 
 
* { 
 
    box-sizing: border-box; 
 
} 
 
.wrapper { 
 
    width: 100%; 
 
    height: 100%; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    flex-direction: row; 
 
} 
 
.transbox { 
 
    position: relative; 
 
    flex: 1 0 50%; 
 
    width: 50%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.transbox .thumbnail { 
 
    display: block; 
 
    position: absolute; 
 
    width: 100px; 
 
    height: 75px; 
 
} 
 
.transbox:nth-of-type(1) .thumbnail { 
 
    bottom: 0; 
 
    right: 0; 
 
} 
 
.transbox:nth-of-type(2) .thumbnail { 
 
    bottom: 0; 
 
    left: 0; 
 
} 
 
.transbox:nth-of-type(3) .thumbnail { 
 
    top: 0; 
 
    right: 0; 
 
} 
 
.transbox:nth-of-type(4) .thumbnail { 
 
    top: 0; 
 
    left: 0; 
 
} 
 
.transbox img { 
 
    width: 100%; 
 
    height: 100%; 
 
    max-width: 100%; 
 
    max-height: 100%; 
 
    float: left; 
 
    margin: 0; 
 
    padding: 0; 
 
    border: 0; 
 
} 
 
.transbox .text { 
 
    position: absolute; 
 
    width: 100%; 
 
    text-align: center; 
 
    color: #FFFFFF; 
 
}

<div class="wrapper"> 
 
    <div class="transbox"> 
 
    <img src="https://s22.postimg.org/61txkvgch/Venture_Capital.jpg" /> 
 
    <div class="thumbnail"> 
 
     <img src="https://s22.postimg.org/61txkvgch/Venture_Capital.jpg" /> 
 
    </div> 
 
    <div class="text"> 
 
     <p>Looking Into The Future</p> 
 
    </div> 
 
    </div> 
 
    <div class="transbox"> 
 
    <img src="https://s11.postimg.org/zf842w1mb/Real_Estate.jpg" /> 
 
    <div class="thumbnail"> 
 
     <img src="https://s11.postimg.org/zf842w1mb/Real_Estate.jpg" /> 
 
    </div> 
 
    <div class="text"> 
 
     <p>Looking into the future</p> 
 
    </div> 
 
    </div> 
 
    <div class="transbox"> 
 
    <img src="https://s18.postimg.org/acomst9gp/image.jpg" /> 
 
    <div class="thumbnail"> 
 
     <img src="https://s18.postimg.org/acomst9gp/image.jpg" /> 
 
    </div> 
 
    <div class="text"> 
 
     <p>Looking Into The Future</p> 
 
    </div> 
 
    </div> 
 
    <div class="transbox"> 
 
    <img src="https://s13.postimg.org/8yima8xvb/Construction.jpg" /> 
 
    <div class="thumbnail"> 
 
     <img src="https://s13.postimg.org/8yima8xvb/Construction.jpg" /> 
 
    </div> 
 
    <div class="text"> 
 
     <p>Looking Into The Future</p> 
 
    </div> 
 
    </div> 
 
</div>

출처

2016-09-15 10:25:44 thepio

4 개의 이미지 전부를 제외하고 예제 이미지 자체를 만날 때 필요한 것은 있지만 축소판 그림이 아닙니다. 나는 또한 공중에 그 이미지를 확대하려고 노력했지만 배경으로 확대합니다. 나는'.grow {transition : all .2s ease-in-out; }' '.grow : hover {transform : scale (1.3); }'; 하지만 여전히 전체 화면으로 이동하지는 않습니다. –

어쩌면 당신은 원하는 구절 등을 포함하기 위해 다시 질문을해야 할 것입니다. 또한이 모든 질문에 대해 그들에게 질문 할 것을 고려해야합니다. – thepio

"decrepitated"<- 이것을 더 사용하기 시작해야합니다. – j08691

희망 당신은 이미지를 통해 캡션을 추가하는

<!DOCTYPE html> 
<html > 
<head> 
<style type="text/css"> 
* { 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
    margin: 0; 
    padding: 0; 
} 

.item { 
    position: relative; 
    float: left; 
    border: 1px solid #333; 

    overflow: hidden; 
    width: 50%; 
    height: 50% 
} 
.item img { 
    max-width: 100%; 

    -moz-transition: all 0.3s; 
    -webkit-transition: all 0.3s; 
    transition: all 0.3s; 
} 
.item:hover img { 
    -moz-transform: scale(1.1); 
    -webkit-transform: scale(1.1); 
    transform: scale(1.1); 
} 
h1 { 
    color: white; 
    margin: 0; 
    padding: 20px; 
} 
html, body { height: 100%; padding: 0; margin: 0; } 
</style> 
</head> 
<body> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 
<div class="grow" style=" width: 40%; position: fixed; top: 50%; left: 50%; margin-top: -100px; margin-left: -10%;"> 
<div> 
<img class=" align:center"; src="https://s14.postimg.org/6ufixiest/Logo.jpg" width="100%" /> 
</div> 
</div> 

<div class="item"> 
    <img src="http://vindhyaassociates.com/wp-content/uploads/2016/09/IT-1.jpg" alt="pepsi"> 

    <div class="item-overlay top"></div> 
</div> 
<div class="item"> 
    <img src="http://vindhyaassociates.com/wp-content/uploads/2016/09/RealEstate1.jpg" alt="pepsi" > 

    <div class="item-overlay top"></div> 
</div> 
<div class="item"> 
    <img src="http://vindhyaassociates.com/wp-content/uploads/2016/09/VentureCapital-1.jpg" alt="pepsi" > 

    <div class="item-overlay top"></div> 
</div> 
<div class="item"> 
    <img src="http://vindhyaassociates.com/wp-content/uploads/2016/09/Construction-1.jpg" alt="pepsi" > 

    <div class="item-overlay top"></div> 
</div> 

<div style=" width: 20%; position: fixed; top: 25%; left: 25%; margin-top: -100px; margin-left: -10%;"> 
<div> 
<h1 id="text"> 
    Construction/Interior Design - Build to Live 
    </h1> 
</div> 
</div> 

<div style=" width: 20%; position: fixed; top: 25%; left: 75%; margin-top: -100px; margin-left: -10%;"> 
<div> 
<h1 id="text"> 
    Real Estate - Buy and Sell Potential Properties 
    </h1> 
</div> 
</div> 

<div style=" width: 20%; position: fixed; top: 75%; left: 25%; margin-top: -100px; margin-left: -10%;"> 
<div> 
<h1 id="text"> 
    Information Technology - Handling Potential IT Projects 
    </h1> 
</div> 
</div> 

<div style=" width: 20%; position: fixed; top: 75%; left: 75%; margin-top: -100px; margin-left: -10%;"> 
<div> 
<h1 id="text"> 
    Venture Capital - Finance for High Growth Potential 
    </h1> 
</div> 
</div> 

<div class="grow" style=" width: 20%; position: fixed; top: 50%; left: 50%; margin-top: -100px; margin-left: -10%;"> 
<div> 
<img class=" align:center"; src="https://s14.postimg.org/6ufixiest/Logo.jpg" width="100%" /> 
</div> 
</div> 
</body> 
</html>

출처

2016-09-15 19:16:57 VAR

HTML에서 4 개의 이미지를 2 * 2로 정렬하는 방법은 무엇입니까?

답변

관련 문제