当大于页面宽度时，将父div扩展为子大小 [英] Expanding parent div to child size when larger than page width

问题描述

父div必须完全包含子div的内容.由于一种奇怪的情况，该子div可能比页面视图本身更宽.问题是，父div似乎总是受限于页面宽度，无论它包含什么内容.

A parent div must completely contain the contents to a child div. Due to an odd circumstance, that child div might be wider than the page view itself. Problem being, the parent div seems to always be limited to the page width, no matter what it contains.

http://jsfiddle.net/e5Lkq/1/

包含:

<div class="outer clearfix">
    <div class="inner">Oversized content here.</div>
</div>

.inner{
    background-color:red;
    height:50px;
    width:1800px;
}

.outer{
    border:5px solid blue;
    /* overflow:hidden; */
}

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

在此示例中，我需要外部div(带有蓝色边框)来扩展孩子的内容.

In this example, I need the outer div (with the blue border) to expand around the child's contents.

我之前遇到过这个问题-有关身体"样式的古怪渲染-但这次我无法再次找到类似的问题.将父级的溢出设置为隐藏只会切断子级元素.加载后，我总是可以抛出一个js来调整大小，但是我宁愿避免这种情况.有什么想法吗?

I've come across this problem before - something about a quirky rendering of the "body" style - but I've been unable to locate similar questions again this time. Setting overflow to hidden for the parent just cuts off the child element. I could always throw in a js to to resize after loading, but I'd rather avoid this. Any thoughts?

谢谢，杰里米

PS我看到了类似的项目，但答案是jquery.这可能只是它的方式: https://stackoverflow.com/questions/8360465/expand-parent-div-width-fit-children-divs-horzontal-scroll网站

PS I see this similar item, but the answer is jquery. This might just have to be the way of it: https://stackoverflow.com/questions/8360465/expand-parent-div-width-to-fit-children-divs-horzontal-scroll-website

推荐答案

您想要的内容类似于收缩包装. http://jsfiddle.net/e5Lkq/2/

What you want is similar to a shrink-wrap. http://jsfiddle.net/e5Lkq/2/

.outer { display: table }

要获得旧版IE支持，可以在 block 容器内使用 inline-block (在默认的内联元素上).参见此和

To get old IE support, you can use inline-block (on a by-default inline element) inside a block container. See this and this (if you're really concerned about support). But I strongly encourage you to drop support (if you can). Is the extra 8% worth the effort? Also note that the percentages are different depending on the site.

这篇关于当大于页面宽度时，将父div扩展为子大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！