Question

在开始我想解释我的问题时，我已经有了主要的容器体，宽度是自动的，最小宽度是960px（屏幕宽度可以大于儿童宽度），那里＆＃39; s子容器，其中边距是自动的，宽度为960px，在儿童容器内部我有一个绝对位置的元素（地图），它总是在父母之外但不总是在身体之外，当我调整窗口大小时，身体会发生变化，然后元素就像身体一样在身体之外，就像它总是在外面一样，如果它在体外，我会试着将它剪掉，因为它会让我的布局在右侧变成白色的间隙但不知道怎么样，有些机构可以解释我怎么能这样做？

http://jsfiddle.net/8hbynzfb/

<div id="content">
    <div class="container">
        <div id="info">
            Test
        </div>
        <div id="map">
        </div>
    </div>
</div>


* {
    padding: 0;
    margin: 0;
}

body {
    border: 2px solid black;
    min-width: 960px;
}

.container {
    position: relative;
    width: 960px;
    margin:0 auto;
    outline: 1px solid red;
    font-size: 0;
}

.container .col-left {
    position: relative;
    display: inline-block;
    margin-right: 41px;
    width: 293px;
    outline: 1px solid green;
}

.container .col-center {
    position: relative;
    display: inline-block;
    margin-right: 41px;
    width: 293px;
    outline: 1px solid blue;
}

.container .col-right {
    position: relative;
    display: inline-block;
    width: 292px;
    outline: 1px solid yellow;
}

.container > div {
    vertical-align: top;
    font-size: initial;
}

#info {
    display: block;
    height: 84px;
    margin-left: 900px;
}

#map {
    display: block;
    height: 256px;
    position: absolute;
    background-image: url('http://gis.meridenct.gov/meriden/images/i_map.png') no-repaet;
    width: 256px;
    right: -128px;
    top: 0px;
    outline: 1px solid yellow;
}

Answer 1

只需在身体上添加一个溢出属性：

body {
    border: 2px solid black;
    min-width: 960px;
    overflow: hidden; /* this is new */
}

updated jsfiddle example

编辑：要仍然有滚动条，请将溢出规则添加到#content。

body {
    border: 2px solid black;
    min-width: 960px;
}
#content {
    min-width: 960px;
    overflow: hidden;
}

updated jsfiddle example

如果外祖父母外出溢出的儿童元素？

1 个答案: