Question

我正在尝试创建两个宽度相等的列，左侧包含文本，右侧包含图像。如果图像宽度大于列宽，我希望图像调整到列宽，但如果图像小于列宽，则希望图像保持原始大小。我已尝试过this question中的说明，但图像（如果更大）将消耗所需的任何空间，从而压缩包含文本的左侧列。我想知道这是否与“table-cell”div的行为有关，或者它是否是浏览器在文本之前容纳图像的优先级问题。我的代码看起来像这样：

<div style="display: table; width:100%;">
    <div style="display: table-row;">
        <div style="display: table-cell; width: 50%; vertical-align: middle;">
            <h1>Header</h1>
            <p>Description</p>
        </div>
        <div style="display: table-cell; width: 50%; vertical-align: middle;">
            <img style="max-width: 100%;height:auto;" src="image.jpg">
        </div>
    </div>
</div>

另外，我使用FireFox作为我的浏览器进行测试。谢谢！

编辑：我还尝试了另一种方法来使用float divs获得相同的效果（下面的代码）。问题是我希望两列以中间为中心，并且我无法在父容器中将较小的float div调整为完整高度，因此内部内容是顶部对齐的。但是，图像确实正确调整大小，这支持了我的预感，即此问题与“table-cell”div的行为方式有关。

<div style="position: relative;">
    <div style="float: left; width: 50%;height:100%;background-color:#F00;">
        <div style="display: table;height:100%;width:100%;">
            <div style="display: table-row;height:100%;width:100%;">
                <div style="display: table-cell;height:100%;width:100%;vertical-align:middle;">
                    <p>content</p>
                </div>
            </div>
        </div>
    </div>
    <div style="float: left; width: 50%;height:100%;background-color:#F00;">
        <div style="display: table;height:100%;width:100%;">
            <div style="display: table-row;height:100%;width:100%;">
                <div style="display: table-cell;height:100%;width:100%;vertical-align:middle;">
                    <img style="max-width:100%;height:auto;" src="image.jpg">
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

代码在Chrome中正常运行。根据本文，这似乎仅在Firefox中存在问题： http://www.carsonshold.com/2014/07/css-display-table-cell-child-width-bug-in-firefox-and-ie/

将table-layout:fixed;添加到样式为display:table;的div中，可以提供您正在寻找的结果 - 允许图像最大宽度工作并尊重单元格宽度。

<div style="display: table; width:100%; table-layout: fixed">
  <div style="display: table-row;">
    <div style="display: table-cell; width: 50%; vertical-align: middle;">
      <h1>Header</h1>
      <p>Description</p>
    </div>
    <div style="display: table-cell; width: 50%; vertical-align: middle;">
      <img style="max-width: 100%;height:auto;" src="image.png">
    </div>
  </div>
</div>

使用表格单元格内的CSS动态调整图像大小

1 个答案: