javascript - 具有覆盖的不均匀响应图像/文本网格

Question

我一直在尝试创建以下布局，但无济于事。有人会好心地帮助我创建一个最小的工作示例或链接到能够帮助我解决这个问题的地方吗？

我需要的是行高相同的网格。每行包含 2 个图像和 1 个文本列(文本列放置在每行的不同位置)。文本列需要与图像高度相同，我希望文本垂直居中，但它的宽度需要更小(大小的一半)。对于这些图像，我希望在悬停或触摸(移动)时有一个白色覆盖层，带有一个标题和几行链接以及一个将有一个视频弹出窗口的链接(一个花式框)。

我希望它能够响应并适应屏幕尺寸。在移动设备上，我觉得每个盒子的宽度都是 100%，但我认为这是平板电脑的尺寸，我在正确放置这个东西时遇到了问题。悬停状态显然需要成为这些平台上的触摸状态。

如果需要，我会提供我的代码，但我想我想从头开始，因为我觉得我刚刚创造了一个巨大的困惑。

我觉得这应该很简单，但我在这方面遇到了太多问题，而且我似乎找不到任何展示我正在尝试创建的示例的网站......已找到类似的想法，但不完全是我正在寻找的。

详细信息:

• 容器的最大宽度为 1140px
• 图片的最大宽度为 444px
• 文本框的最大宽度为 222px
• 5 像素边距/填充

如能提供正确方向的帮助，我们将不胜感激。

http://jsfiddle.net/sa7v57bf/

<div class="container">
    <ul>
        <li class="text">
            <div>
                Some Text.
            </div>
        </li>
        <li class="media">
            <img src="http://placehold.it/444x342" alt="Image">
            <div class="info">
                <h2>HEADER</h2>
                <div class="program-info">
                    <p><a href="#">Program Page</a></p>
                    <p><a href="#">Video</a></p>
                </div>
            </div>
        </li>
        <li class="media">
            <img src="http://placehold.it/444x342" alt="Image">
            <div class="info">
                <h2>HEADER</h2>
                <div class="program-info">
                    <p><a href="#">Program Page</a></p>
                    <p><a href="#">Video</a></p>
                </div>
            </div>
        </li>
    </ul>
    <ul>
        <li class="media">
            <img src="http://placehold.it/444x342" alt="Image">
            <div class="info">
                <h2>HEADER</h2>
                <div class="program-info">
                    <p><a href="#">Program Page</a></p>
                    <p><a href="#">Video</a></p>
                </div>
            </div>
        </li>
        <li class="text">
            <div>
                Some Text.
            </div>
        </li>
        <li class="media">
            <img src="http://placehold.it/444x342" alt="Image">
            <div class="info">
                <h2>HEADER</h2>
                <div class="program-info">
                    <p><a href="#">Program Page</a></p>
                    <p><a href="#">Video</a></p>
                </div>
            </div>
        </li>
    </ul>
</div>

CSS:

*{box-sizing:border-box}.container{max-width:1140px;margin:0 auto;padding:0 10px}ul,ul li{padding:0}ul{list-style:none;margin:1% 0;font-size:0}ul li{display:inline-block;width:100%;margin:0 0 1%;height:100%;position:relative}ul li img{width:100%;display:block}ul li.text{background-color:#000;color:#FFF;padding:20px 10px;font-size:1.5rem;width:100%;vertical-align:top;text-align:center}@media (min-width:550px){ul li{width:50%}ul li.text div{margin:2%}}@media (min-width:1000px){ul li{width:39.5%;margin:0 .5%}ul li:first-child{margin-left:0}ul li:last-child{margin-right:0}ul li.text{width:19%;min-height:305px}}@media (min-width:1140px){ul li.text{min-height:341px}ul li.text div{margin:40% 0}}.info{background:rgba(255,255,255,.83);color:#000;font-size:2.4rem;left:10px;opacity:0;overflow:hidden;padding:3rem;position:absolute;top:10px;right:10px;bottom:10px;-webkit-transition:.6s;transition:.6s}.info:hover{opacity:1}

Answer 1

这里是事物的组合。

用于等高的 Flexbox，需要时的最大宽度，用于间距的填充/边距......哦，以及用于覆盖层的定位。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.wrapper {
  max-width: 1140px;
  margin: auto;
  margin-top: 5px;
  border: 1px solid grey;
  display: flex;
  padding: 5px;
}
.wrapper > *:nth-child(2) {
  margin: 0 5px;
}
.text,
header,
imgwrap {
  flex: 1;
}
.text {
  width: 20%;
  padding: 1em;
  max-width: 222px;
  background: orange;
  display: flex;
  justify-content: center;
  align-items: center;
}
header {
  background: #bada55;
  position: relative;
}
.imgwrap .overlay,
header .overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: rgba(155, 0, 65, .25);
  padding: 1em;
  font-weight: bold;
  color: #fff;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility 0.25s ease;
}
.imgwrap:hover .overlay,
header:hover .overlay {
  opacity: 1;
  visibility: visible;
}
.imgwrap {
  width: 40%;
  position: relative;
}
.imgwrap img {
  width: 100%;
  display: block;
  max-width: 444px;
}

<div class="wrapper">
  <div class="text">Lorem ipsum dolor.</div>
  <header>
    <div class="overlay">Overlay Text</div>
  </header>
  <div class="imgwrap">
    <img src="http://lorempixel.com/output/food-q-c-444-250-3.jpg" alt="" />
    <div class="overlay">Image text</div>
  </div>
</div>

<div class="wrapper">
  <div class="imgwrap">
    <img src="http://lorempixel.com/output/food-q-c-444-250-3.jpg" alt="" />
    <div class="overlay">Image text</div>
  </div>
  <div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
  <div class="imgwrap">
    <img src="http://lorempixel.com/output/food-q-c-444-250-3.jpg" alt="" />
    <div class="overlay">Image text</div>
  </div>
</div>

媒体查询可以管理其余部分。

Codepen Demo.