0

嗨，我遇到了一个问题，我无法在 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，那就太好了

4

2 回答 2

0

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

于 2013-04-29T22:22:10.860 回答
0

添加position:relative到#main：

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

jsFiddle 示例

于 2013-04-29T20:32:40.970 回答