Question

我正在构建一个响应式网站，需要将徽标设备延伸到内容的右边缘。（我已经使用了div的颜色延伸到每侧容器边缘之外的技巧）。

然而，当我在包含div中使用set overflow：visible时，页面的流程变得混乱。

以下代码在小提琴https://jsfiddle.net/clayRav/mm65n3eg/中工作正常，但右侧位图的边缘被剪裁。应该看到这延伸到可视区域的边缘之外。为了解决这个问题，我尝试更改溢出：隐藏到溢出：在包含div中可见，但这会导致各种问题。我认为这是因为溢出：可见清除浮子？欢呼声。

HTML：

<div class="container">
    <div class="full-width-bar">
        <div id="header">
            <aside id="left_bar">
                <img src="http://placehold.it/80x35" class="left_img" />
            </aside>
            <div id="central_image">
                <img src="http://placehold.it/200x50" />
            </div>
            <img src="http://placehold.it/80x35" class="right_img" />
        </div>
    </div>
</div>

CSS：

#container {
    position: relative;
    margin: 0 auto;
    max-width: 400px;
}
.full-width-bar {
    margin-left: -9999rem;
    margin-right: -9999rem;
    padding-left: 9999rem;
    padding-right: 9999rem;
    background-color: blue;
    position: relative;
    overflow:hidden;
}
#header {
    overflow: hidden;
    position: relative;
}
#left_bar {
    float: left;
    position: relative;
    width: 20%;
}
.left_img {
    margin: 10px 5% 0 15%;
    width: 80%;
}
#central_image {
    float: left;
    width: 60%;
    display: block;
    margin: 0 auto;
}
#central_image img {
    width: 100%;
    display: block;
}
.right_img {
    position: absolute;
    width: 20%;
    bottom: 0;
    right: -5%;
    display:block;
}

Answer 1

我希望它可以帮助你我可以改变html和css

https://jsfiddle.net/mm65n3eg/6/

#container {
position: relative;
margin: 0 auto;
max-width: 400px;
width:90%;
}
.full-width-bar {
position: relative;
width:100%;
display:inline-block;
}
#header {
width:100%;
display:inline-block;
padding:20px 0px;
background:#00F;
}
#left_bar {
position:absolute;
left:0;
width: 20%;
text-align:center;
top:30%;
}
.left_img {
width:auto;
max-width:100%;
height:auto;
max-height:100%;
}
#central_image {
margin-left:auto;
margin-right:auto;
width: 60%;
text-align:center;
}
#central_image img {
width:auto;
max-width:100%;
}
.right-bar-pic {
position:absolute;
right:0;
width: 20%;
text-align:center;
top:30%;
}
.right_img {
width:auto;
max-width:100%;
height:auto;
max-height:100%;
}

CSS溢出可见制作图像消失

1 个答案: