0

こんにちは、div内に2つの画像を配置できないという問題があります（jsfiddleを参照してください：http://jsfiddle.net/edddotcom/naEFm/）

2 つの三角形/矢印 (クラス "triangle") を濃い灰色の 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;div内にとどまるように、矢印の画像が必要です。矢印をメインの div に対して相対的に配置する必要があることをブラウザに伝えるのを#main参照してください。タグ全体に自動的に. これが問題の平和を理解するのに役立つことを願っています!position:relative;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 に答える