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。
它的孩子是一个＆＃34;工作＆＃34; div，已经只有153个高度，虽然在CSS中明确说明，这应该是100％。

我尝试过很多事，但没有运气。

Answer 1

你可以这样做。我从标题中拆分了images / pdf，但仍然具有与点击相同的效果。

＆＃13;

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

＆＃13;

<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>

＆＃13;

请告诉我这是否有帮助，或者您是否需要更多。

HTML表动态高度

1 个答案: