Question

第一次使用MDL并且我已经使用the grid进行了很多工作，但是我在将两个标题图像显示在同一高度时遇到了问题。

在网站的第一行，我希望左上方有一个横幅状的长图片，旁边有一个方形的个人资料照片图片，后面是公司或投资组合名称的一些文字。

这里的顶行是什么样的：

<div id="container" class="mdl-js-layout mdl-grid">
    <div class="mdl-cell mdl-cell--6-col mdl-cell--8-col-tablet">
        <img src="http://placehold.it/1200x400">
    </div>
    <div class="mdl-cell mdl-cell--2-col mdl-cell--hide-tablet mdl-cell--hide-phone">
        <img src="http://placehold.it/400x400">
    </div>
    <div class="mdl-cell mdl-cell--4-col">
        <div class="header-text">HEADER TEXT</div>
        <div class="bio-text">SUBHEADER TEXT</div>
    </div>
</div>

更新：Here's a jsfiddle。

占位符图像故意大于它们显示的图像，因为容器的宽度限制为1200像素。

出于某种原因，当我这样做时，无论视口有多宽，第二个方形图像都显示出比第一个横幅图像更短的高度。

我通过搜索发现的一些建议涉及到flexbox，其属性似乎已经整合到MDL中，但我尝试将其添加到顶部但仍然没有成功 - 尽管我承认我＆我＃39;我不确定我是否正确地做到了。

我感谢任何人提供的任何帮助。

更新：我通过使第一张图像成为其div的背景图像来解决它，因为它可能是风景或其他类型的环境图像。它不是一个完美的解决方案，所以如果其他人有想法，我仍然愿意接受建议。但是这里我在此期间所做的事情（在制作中，风格是独立的，但我在这里以速记形式包括它）：

<div id="container" class="mdl-js-layout mdl-grid">

    <div class="mdl-cell mdl-cell--6-col mdl-cell--8-col-tablet" 
style="background-image:url(http://placehold.it/1200x400); 
background-size: 100%"></div>
    <div class="mdl-cell mdl-cell--2-col mdl-cell--hide-tablet mdl-cell--hide-phone">
        <img src="http://placehold.it/400x400">
    </div>
    <div class="mdl-cell mdl-cell--4-col">
        <div class="header-text">HEADLINE</div>
        <div class="bio-text">SUPPORTING TEXT</div>
    </div>
</div>

强制图像在Google MDL网格的同一行中具有相同的高度

0 个答案: