Question

我之前（某种程度上）问了这个问题，答案是无法帮助我做我想做的事情。在这个网站上工作更多，并且无数个小时试图找出解决方案（我甚至不能完全确定它可以完成），我回过头来试图解决这个问题。它是主页的核心，因此它在视觉上以我想要的方式工作非常重要。

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

内容容器的容器宽度应为最小 30％ - 30px（10px填充，右侧边框为20px）。
如果照片不够大，占据容器的70％，内容容器宽度应该增加，照片容器宽度会缩小。
内容容器的高度（基本上是新闻/博客文章）不应该比图像更高或更短。如果内容溢出，它们应该是可滚动的。
为了防止这个区块超高，它的高度不应超过1000px（我想也许设置图像max-height就是这样说的。

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

下面是标记和样式：

<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%;
}

响应式设计：复杂的显示表，用于显示单行照片和内容

0 个答案: