在同一行上对齐图像

时间：2017-11-12 18:00:09

标签： html css

如何在同一行上对齐三个图像，以便在调整浏览器大小时图像仍在同一行？因为现在使用我的代码我只是告诉他们向左浮动所以当浏览器调整大小时，一些图像会转到新行。我看起来像将页面分成三列。

.containerh {
  position: relative;
  margin-top: 50px;
  width: 500px;
  height: 300px;
  float:left;
}

.overlayh {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0);
  transition: background 0.5s ease;
}

.containerh:hover .overlayh {
  display: block;
  background: rgba(0, 0, 0, .3);
}

#imgh {
  position: absolute;
  width: 500px;
  height: 300px;
  left: 0;
}

.titleh {
  position: absolute;
  width: 500px;
  left: 0;
  top: 120px;
  font-weight: 700;
  font-size: 30px;
  text-align: center;
  text-transform: uppercase;
  color: white;
  z-index: 1;
  transition: top .5s ease;
}

.containerh:hover .titleh {
  top: 90px;
}

.buttonh {
  position: absolute;
  width: 500px;
  left:0;
  top: 180px;
  text-align: center;
  opacity: 0;
  transition: opacity .35s ease;
}

.buttonh a {
  width: 200px;
  padding: 12px 48px;
  text-align: center;
  color: white;
  border: solid 2px white;
  z-index: 1;
}

.containerh:hover .buttonh {
  opacity: 1;
}
.sx{float:left;margin-right:15px;}
<div class="sx">
<div class="containerh">
  <img id="imgh" src="https://images.unsplash.com/photo-1488628075628-e876f502d67a?dpr=1&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop=&bg=" alt="" />
  <p class="titleh">card title</p>
  <div class="overlayh"></div>
  <div class="buttonh"><a href="#"> BUTTON </a></div>
</div>
</div>

<div class="sx">
<div class="containerh">
  <img id="imgh"src="https://images.unsplash.com/photo-1488628075628-e876f502d67a?dpr=1&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop=&bg=" alt="" />
  <p class="titleh">card title</p>
  <div class="overlayh"></div>
  <div class="buttonh"><a href="#"> BUTTON </a></div>
</div>
</div>
   
<div class="sx">
<div class="containerh">
  <img id="imgh"src="https://images.unsplash.com/photo-1488628075628-e876f502d67a?dpr=1&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop=&bg=" alt="" />
  <p class="titleh">card title</p>
  <div class="overlayh"></div>
  <div class="buttonh"><a href="#"> BUTTON </a></div>
</div>
</div>

2 个答案:

答案 0 :(得分：1)

您可以像这样使用flex（我还更新了一些样式以适应柔性显示）：

/* This will create 3 columns with your images*/
.container {
  display: flex;
}
.containerh {
  position: relative;
  flex: 1;
  margin: 50px 5px 0;
}
/* ---  */


.overlayh {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0);
  transition: background 0.5s ease;
}

.containerh:hover .overlayh {
  display: block;
  background: rgba(0, 0, 0, .3);
}

img {
  max-width: 100%;
}

.titleh {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 30%;
  font-weight: 700;
  font-size: 30px;
  text-align: center;
  text-transform: uppercase;
  color: white;
  z-index: 1;
  transition: bottom .5s ease;
}

.containerh:hover .titleh {
  bottom: 40%;
}

.buttonh {
  position: absolute;
  right: 0;
  left: 0;
  bottom: 40%;
  text-align: center;
  opacity: 0;
  transition: opacity .35s ease;
}

.buttonh a {
  width: 100%;
  padding: 12px 48px;
  text-align: center;
  color: white;
  border: solid 2px white;
  z-index: 1;
  box-sizing: border-box;
}

.containerh:hover .buttonh {
  opacity: 1;
}
<div class="container">
  <div class="containerh">
    <img id="imgh" src="https://images.unsplash.com/photo-1488628075628-e876f502d67a?dpr=1&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop=&bg=" alt="" />
    <p class="titleh">card title</p>
    <div class="overlayh"></div>
    <div class="buttonh"><a href="#"> BUTTON </a></div>
  </div>
  <div class="containerh">
    <img id="imgh" src="https://images.unsplash.com/photo-1488628075628-e876f502d67a?dpr=1&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop=&bg=" alt="" />
    <p class="titleh">card title</p>
    <div class="overlayh"></div>
    <div class="buttonh"><a href="#"> BUTTON </a></div>
  </div>

  <div class="containerh">
    <img id="imgh" src="https://images.unsplash.com/photo-1488628075628-e876f502d67a?dpr=1&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop=&bg=" alt="" />
    <p class="titleh">card title</p>
    <div class="overlayh"></div>
    <div class="buttonh"><a href="#"> BUTTON </a></div>
  </div>
</div>

由于IE9不支持flex，因此使用inline-block和width是另一种解决方案：

/* This will create 3 columns with your images*/

.container {
  text-align: center;
  font-size:0; /*remove white spaces*/
}

.containerh {
  position: relative;
  display: inline-block;
  vertical-align:top;
  width: calc((100% / 3) - 10px); /* take exactly 1/3 of the width minus margin*/
  margin: 50px 5px 0;
  font-size:initial; /* set the font back*/
}

/* ---  */

.overlayh {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0);
  transition: background 0.5s ease;
}

.containerh:hover .overlayh {
  display: block;
  background: rgba(0, 0, 0, .3);
}

img {
  max-width: 100%;
}

.titleh {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 30%;
  font-weight: 700;
  font-size: 30px;
  text-align: center;
  text-transform: uppercase;
  color: white;
  z-index: 1;
  transition: bottom .5s ease;
}

.containerh:hover .titleh {
  bottom: 40%;
}

.buttonh {
  position: absolute;
  right: 0;
  left: 0;
  bottom: 40%;
  text-align: center;
  opacity: 0;
  transition: opacity .35s ease;
}

.buttonh a {
  width: 100%;
  padding: 12px 48px;
  text-align: center;
  color: white;
  border: solid 2px white;
  z-index: 1;
  box-sizing: border-box;
}

.containerh:hover .buttonh {
  opacity: 1;
}
<div class="container">
  <div class="containerh">
    <img id="imgh" src="https://images.unsplash.com/photo-1488628075628-e876f502d67a?dpr=1&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop=&bg=" alt="" />
    <p class="titleh">card title</p>
    <div class="overlayh"></div>
    <div class="buttonh"><a href="#"> BUTTON </a></div>
  </div>
  <div class="containerh">
    <img id="imgh" src="https://images.unsplash.com/photo-1488628075628-e876f502d67a?dpr=1&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop=&bg=" alt="" />
    <p class="titleh">card title</p>
    <div class="overlayh"></div>
    <div class="buttonh"><a href="#"> BUTTON </a></div>
  </div>

  <div class="containerh">
    <img id="imgh" src="https://images.unsplash.com/photo-1488628075628-e876f502d67a?dpr=1&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop=&bg=" alt="" />
    <p class="titleh">card title</p>
    <div class="overlayh"></div>
    <div class="buttonh"><a href="#"> BUTTON </a></div>
  </div>
</div>

答案 1 :(得分：-1)

请注意，全球12％的浏览器都没有（正确）支持使用未加固定的flexbox（请参阅caniuse.com）。

我对Temani Afifs代码做了一些小调整，使其更具跨浏览性。首先，我删除了flexbox以使其在IE（9）中工作。我还从Twitter Bootstrap中借用了负边距技巧，以便能够在没有calc()的情况下组合百分比和像素。最后我以box-sizing为前缀。

＆＃13;
＆＃13; 
/* This will create 3 columns with your images*/
.container {
  position: relative;
  margin: 0 -15px;
}
.containerh {
  position: relative;
  padding: 50px 5px 0;
  width: 33.33%;
  float: left;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
/* ---  */
body > div {position: relative; margin: 0 15px;} 
.containerh > div {position: relative;}

.overlayh {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0);
  transition: background 0.5s ease;
}

.containerh:hover .overlayh {
  display: block;
  background: rgba(0, 0, 0, .3);
}

img {
  max-width: 100%; display: block;
}

.titleh {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 30%;
  font-weight: 700;
  font-size: 30px;
  text-align: center;
  text-transform: uppercase;
  color: white;
  z-index: 1;
  transition: bottom .5s ease;
}

.containerh:hover .titleh {
  bottom: 40%;
}

.buttonh {
  position: absolute;
  right: 0;
  left: 0;
  bottom: 40%;
  text-align: center;
  opacity: 0;
  transition: opacity .35s ease;
}

.buttonh a {
  width: 100%;
  padding: 12px 48px;
  text-align: center;
  color: white;
  border: solid 2px white;
  z-index: 1;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.containerh:hover .buttonh {
  opacity: 1;
}
＆＃13; 
<div><div class="container">
  <div class="containerh"><div>
    <img id="imgh" src="https://images.unsplash.com/photo-1488628075628-e876f502d67a?dpr=1&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop=&bg=" alt="" />
    <p class="titleh">card title</p>
    <div class="overlayh"></div>
    <div class="buttonh"><a href="#"> BUTTON </a></div>
  </div></div>
  <div class="containerh"><div>
    <img id="imgh" src="https://images.unsplash.com/photo-1488628075628-e876f502d67a?dpr=1&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop=&bg=" alt="" />
    <p class="titleh">card title</p>
    <div class="overlayh"></div>
    <div class="buttonh"><a href="#"> BUTTON </a></div>
  </div></div>

  <div class="containerh"><div>
    <img id="imgh" src="https://images.unsplash.com/photo-1488628075628-e876f502d67a?dpr=1&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop=&bg=" alt="" />
    <p class="titleh">card title</p>
    <div class="overlayh"></div>
    <div class="buttonh"><a href="#"> BUTTON </a></div>
  </div>
</div></div></div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题