Question

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

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

blockquote的大小通过其中一个父元素的宽度进行隐含设置，并且表容器用于布置blockquote本身。

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

问题是：有没有办法在不改变html布局的结构的情况下做到这一点，而无需在blockquote本身再次设置显式宽度（我不能做后者，因为我不知道真正的大小实际布局中的blockquote，因为外部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>

Answer 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;
}

Demo

但是，如果你给设置宽度为div的类名或id，那么这将大大改善。查看this fiddle，看看它是如何运作的。

如何在<blockquote> </blockquote>中剪切<img/>

1 个答案: