侧栏下方的图片 [英] Image below sidebar

问题描述

我有一个CSS布局，如这张图片.

I have a CSS layout as in this picture.

我想实现以下行为

img应始终位于左侧边栏下方(如图所示).问题是左侧边栏包含折叠/展开链接的列表，展开时，img与左侧边栏重叠并且文本不可读.

img should be always below left sidebar (as in the picture). Problem is that left sidebar contains a list of collapse/expand links and when you expand it the img overlaps with left sidebar and text is unreadable.

谢谢

推荐答案

HTML

<div id="container">
    <div id="header">ert</div>
    <div id="left-sidebar">sdfsdfsdft
        <div id="img">IMG</div></div>
    <div id="right-sidebar">ert</div>
    <div id="content">aaert</div>
</div>

CSS:

#container {
    width:100%;
    height:100%;
}
#header {
    background: url("img.png") red;
    background-repeat: no-repeat;
    background-position: right top; 
    height: 125px;
    margin:-10px -10px 0px -10px;
}

#left-sidebar {
    left: 0; 
    height:2000px;
    width:200px;
    background-color: yellow;
    position: fixed;
}

#right-sidebar {
    right:0;
    position: fixed;
    width:200px;
    height:2000px;
    background:green;
}
#img {
    border:1px solid;
    position: relative;
    top:5px;
    left:0px;
    margin-left:10px;
    width:175px;
    height:175px;
}

#content {
    margin-left:-10px;
    position: absolute;
    margin:auto;
    top:130px;
    left:208px;
    right:208px;
    border:1px solid;
    Height:100%;
}

这篇关于侧栏下方的图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！