如何在HTML中将4张图像对齐为2 * 2？

时间：2016-09-15 09:48:46

标签： html

我一直在尝试对齐要显示的四张图像，如下图所示。但是每排后我都得到了空位。我该如何删除它们？

Example Image

还有一种方法可以在所有四个图像相遇的中间添加示例图像的小缩略图吗？

除此之外，我还试图在图像上添加标题。目前它们显示在图像下方。如何在图像上添加它们？

<!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/

3 个答案:

答案 0 :(得分：1)

＆＃13;
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

您的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>

答案 2 :(得分：0)

希望这就是你要找的东西

<!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>
相关问题
最新问题