0

我试图限制我在块引用中加载的任何内容的水平大小（我不控制块引用中的内容，所以我知道它会搞砸我的布局）。这是页面布局的简化测试用例：

<html>
  <body>
    <div style="width: 800px; background-color: #ff0000;">
      <div style="display: table;">
        <div style="display: table-row;">
          <blockquote style="overflow:hidden;">
           <div style="width: 1000px; height: 400px;background-color: #00ff00;"></div>
          </blockquote>
        </div>
      </div>
    </div>
  </body>
</html>

块引用的大小是通过其父元素之一的宽度隐式设置的，并且表格容器用于布局块引用本身。

现在，如果您尝试将上述 html 复制/粘贴到 test.html 文件中，您将看到整个内部 div 显示为蓝色，超出了红色背景的边界。我想确保它在背景边界处被剪裁。

那么问题是：有没有一种方法可以在不改变 html 布局结构并且不必在块引用本身上再次设置显式宽度的情况下做到这一点（我不能这样做，因为我不知道块引用的实际大小在实际布局中，因为外部 div 中还有其他元素占用了未知数量的水平空间）？

编辑

早些时候，我天真地尝试了以下方法。我在表格中添加了一个额外的列，以说明我真的不知道表格中的其他元素会占用多少空间。

<html>
  <body>
  <div style="width: 800px; background-color: #ff0000;">
    <div style="display: table;">
      <div style="display: table-row;">
        <div style="display: table-cell;">
          <blockquote style="overflow:hidden;" id="inner">
            <div style="width: 1000px; height: 400px;background-color: #00ff00;"></div>
          </blockquote>
        </div>
        <div style="display: table-cell;">
          <div style="width:100px; background-color:#0000ff; height: 300px;"></div>
        </div>
      </div>
    </div>
  </div>
  <script>
    var width = document.getElementById('inner').parentNode.offsetWidth;
    console.log(width);
  </script>
  </body>
</html>
4

1 回答 1

1

为了overflow: hidden;工作，您必须明确设置元素的尺寸。所以，是的，对不起，你必须在blockquote.

如果允许，您可以使用 javascript 确定具有设置宽度的父元素的宽度，然后blockquote相应地设置宽度。

这是一个使用当前标记的示例，说明它如何工作：

var root = document.getElementsByTagName('div')[0],
    block = document.getElementsByTagName('blockquote'),
    i;

for (i = 0; i < block.length; i += 1) {
    block[i].style.maxWidth = root.style.width;
}

演示

但是，如果您要为具有设置宽度的 div 提供类名或 id，这将大大改善。看看这个小提琴，看看它是如何工作的。

于 2013-05-21T15:42:52.213 回答