css - HTML 表格动态高度

Question

我的问题是我有几个图像、SVG 和 PDF 文件，我想在动态网格中显示它们。为此，我一直在使用这样的表格:

<table width="100%" border="1" cellspacing="0" cellpadding="0">  
        <tr>  
              <td width="35%"> 
                  <div class="work">
                        <a href="w1.html">
                            <img src="img/work1.jpg" class="media" alt=""/>
                            <div class="caption">
                                <div class="work_title">
                                    <h1>WORK IMAGE 1</h1>
                                </div>
                            </div>
                        </a>
                    </div>
                </td> 
                <td width="35%"> 
                  <div class="work">
                        <a href="w2.html" height=100%>
                            <img src="img/work2.jpg" class="media" alt=""/>
                            <div class="caption">
                                <div class="work_title">
                                    <h1>WORK IMAGE 2</h1>
                                </div>
                            </div>
                        </a>
                    </div>
                </td> 
                <td width="30%" height=100%>
                        <div class="work">
                            <a href="work3.html">
                                <embed src="work3.pdf#toolbar=0&scrollbar=0" width=100% height=100% type='application/pdf'>
                                <div class="caption">
                                    <div class="work_title">
                                        <h1>WORK PDF 3</h1>
                                    </div>
                                </div>
                            </a>
                        </div>
                </td> 
        </tr>
    </table>

这部分的CSS是这样的:

.main .work{
  display: table;
  width: 100%;
  height: 100%;
  float: right;
  position: relative;
  overflow: hidden;
}

好的部分是图像会自动缩放到它们的最大宽度，并将表格高度更改为它们以这种方式达到的高度。

但是 PDF 和 SVG 文件甚至都不会尝试。由于某种原因，它们被卡在 150pt 的高度。当我检查浏览器中的元素时，我得到以下信息:

• 示例中包含 PDF 或 SVG 文件的 td(表格单元格)的高度为 238pt。
• 它的 child 是一个“工作”div，它已经只有 153 的高度，虽然在 CSS 中明确说明，那应该是 100%。

我试过查找很多东西，但没有成功。

Answer 1

你可以这样做。我将图片/pdf 从标题中分离出来，但仍然具有您想要的点击效果。

    table .work {
      display: table;
      width: 100%;
      float: right;
      position: relative;
      overflow: hidden;
      display: table-row;
      height: 100%;
      background-color: #f5f5f5;
    }

<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td width="35%">
        <div class="work">
          <a href="w1.html">
            <img src="http://webresizer.com/images2/bird1_before.jpg" width="100%" class="media" alt="" />
          </a>
        </div>
      </td>
      <td width="35%">
        <div class="work">
          <a href="w2.html" height="100%">
            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/91525/potofgold.svg">
          </a>
        </div>
      </td>
      <td width="30%" height="100%">
        <div class="work">
          <a href="work3.html">
            <embed src="https://www.computerhope.com/jargon/p/example.pdf#toolbar=0&navpanes=0&scrollbar=0" width="100%" height="100%"
              type='application/pdf'></embed>
          </a>
        </div>
      </td>
    </tr>
    <tr>
      <td width="35%">
        <div class="work">
          <a href="w1.html">
            <div class="caption">
              <div class="work_title">
                <h1>WORK IMAGE 1</h1>
              </div>
            </div>
          </a>
        </div>
      </td>
      <td width="35%">
        <div class="work">
          <a href="w2.html" height="100%">
            <div class="caption">
              <div class="work_title">
                <h1>WORK IMAGE 2</h1>
              </div>
            </div>
          </a>
        </div>
      </td>
      <td width="30%" height="100%">
        <div class="work">
          <a href="work3.html">
            <div class="caption">
              <div class="work_title">
                <h1>WORK PDF 3</h1>
              </div>
            </div>
          </a>
        </div>
      </td>
    </tr>
  </table>

让我知道这是否有帮助，或者您是否需要更多。