Question

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

我需要的是行高相同的网格。每行包含2个图像和1个文本列（文本列放置在每行的不同位置）。文本列需要与图像的高度相同，我希望文本垂直居中，但它的宽度需要更小（一半大小）。有了图像，我想在悬停或触摸（移动）上有一个白色的覆盖图，带有一个标题和几行链接和一个链接，它将有一个视频弹出窗口（一个幻想盒）。

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

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

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

详细说明：

1140px作为容器的最大宽度
444像素作为图像的最大宽度
222px作为文本框的最大宽度
5px margin / padding

任何正确方向的帮助都会感激不尽。

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.

具有叠加的不均匀响应图像/文本网格

1 个答案: