Question

嗨我有一个问题，我不能在div中找到两个图像（见jsfiddle：http://jsfiddle.net/edddotcom/naEFm/）

我希望两个三角形/箭头（“三角形”类）位于深灰色灰色div（id“main”）的右上角和右下角

我需要按原样定位所有其他元素（左侧菜单和右侧主要内容

HTML：

<div id="page">
    <div id="container">
        <div id="menu">
            <ul class="slidingMenu">
                <li><a href="#">LINK1</a></li>
                <li><a href="#">LINK2</a></li>
                <li><a href="#">LINK3</a></li>
                <li><a href="#">LINK4</a></li>
                <li><a href="#">LINK5</a></li>
                <li><a href="#">LINK6</a></li>
            </ul>
        </div>
        <div id="main">
            <h1>Heading</h1>
            <div id="content">
                <img id="mainimg" src="http://onlyhdwallpapers.com/wallpaper/ball_monochrome_desktop_1680x1050_hd-wallpaper-183077.jpg"/>
            <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </p>
            </div>
            <div class="structure">
            <img id="up" class="triangle" src="http://f0.bcbits.com/z/26/17/2617229726-1.jpg"/>
            <img id="down" class="triangle" src="http://f0.bcbits.com/z/26/17/2617229726-1.jpg"/>
            <div>
        </div>
    </div>
</div>

CSS：

body{
    background:#292929;
    font-family: Arial, Helvetica, sans-serif;
}
#page{
    display:inline-block;
    text-align:center;
    width:100%;
}
#container{
    display:block;
    background-color:red;
    width:900px;
    height:400px;
    text-align:center;
}
#menu{
    display:inline-block;
    background-color:white;
    width:40%;
    overflow:none;
    float:left;
}
ul{
    list-style:none;
    text-align:right;
}
ul a{
    font-size:50px;
    text-decoration: none;
    line-height: 50px;
    padding-right:10px;
    color: #ddd;
}
ul a:hover{
    background-color:#999967;
}
#main{
    background-color:grey;
    width:60%;
    float:right;
    max-height:330px;
}
#mainimg{
    width:40%;
    float:left;
    margin:10px;
    max-height:300px;
}
#main p{
    text-align:justify;
    padding-left:10px;
    padding-right:10px;
    margin-top:0px;
}
#content{
    max-height:250px;
    overflow-y:auto;
}
.structure{
    display:block;
    height:40px;
    background-color:white;
    width:20px;
}
#up{
    position:absolute;
    top:0px;
    right:0px;
    height:20px;
    width:20px;
}
#down{
    -webkit-transform: scaleY(-1);
    position:absolute;
    bottom:0px;
    right:0px;
    height:20px;
    width:20px;
}

如果你可以用你认为最好的那个来编辑jsfiddle

Answer 1

将position:relative添加到#main：

#main {
    background-color:grey;
    width:60%;
    float:right;
    max-height:400px;
    position:relative;
}

<强> jsFiddle example

Answer 2

您需要position:relative;箭头图片，以便它们将保留在#main div中，请参阅position:relative;告诉浏览器箭头必须相对于主要位置div，“或者watever直接将其划分为”，（否则position:absolute;将自动相对于整个<body>标记定位。希望这有助于您理解和平问题！

DIV内的绝对定位

2 个答案: