问如何在HTML中将4个图像对齐为2*2？
EN

Stack Overflow用户

提问于 2016-09-15 09:48:46

回答 3查看 423关注 0票数 0

我一直在尝试对齐四个图像，这些图像将显示为下面的图片。但是我在每一行后面都有空格。如何删除它们？

另外，有没有一种方法可以让我在所有四个图像相交的中间添加一个示例图像的小缩略图？

此外，我还试图在图片上添加说明文字。目前，它们显示在图像下方。如何将它们添加到图像上？

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

html

1元体验云点播

覆盖建站/短视频等热门场景，提供媒资管理、短视频 SDK、小程序插件和播放器云+端一体化能力，助您抓住视频风口

回答 3

Stack Overflow用户

发布于 2016-09-15 10:12:14

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>

票数 1

Stack Overflow用户

发布于 2016-09-15 10:25:45

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

票数 1

Stack Overflow用户

发布于 2016-09-15 19:16:57

希望这就是你要找的

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