1

我以前（有点）问过这个问题，答案无法帮助我做我想做的事情。在这个网站上工作了更多之后，无数个小时试图找出解决方案（我什至不完全确定它可以完成），我回来试图解决这个问题。它是主页的核心，所以它以我想要的方式在视觉上工作是很重要的。

问题：
我在一个容器（显示为表格）中有两个“模块”（显示为表格单元格）。我创建了这个jsfiddle来展示模型如何与横向图像和纵向图像交互。我会继续列出要求。

  • 内容容器的最小宽度应为容器的 30% - 30px（10px 填充和右侧 20px 的边框）。
  • 如果照片不够大，无法占据容器的 70%，则内容容器的宽度应该会增大，而照片容器的宽度会缩小。
  • 内容容器（本质上是新闻/博客文章）的高度不应高于或低于图像。如果内容溢出，它们应该是可滚动的。
  • 为了防止这个块绝对超高，它的高度不应该超过 1000 像素（我想也许设置图像最大高度就是这样说的方式。

我觉得我一直在互联网上试图弄清楚如何做到这一点，但我没有运气。

下面是标记和样式：

<div id="container">
    <div class = "content">
        <h5>
            blah
        </h5>
    </div>
    <div class = "image">
        <img src="http://www.blah.com/blah.jpg" />
    </div>
</div>

#container {
    display: inline-table;
    width: 100%;
    border-bottom: 20px solid #cc0000;
}
#container .content {
    display: table-cell;
    vertical-align: top;
    min-width: calc(30% -40px);
    border-right: 20px solid #383838;
    padding: 10px;
    background: #eee;
    max-height: 100%;
    overflow:scroll;
}

#container .image {
    display: table-cell;
    width: 70%;
    padding: 0px;
    background: #ccc;
    max-height: 100%;
}

img {
    max-width: 100%;
}
4

0 回答 0