0

スタイルシートを含むhtmlコードを書きました。画像、タイトルはクラスの下にあり、タイトルの上に画像を表示したい..今度は 画像レイヤーの下にあります。また、タイトルがデータレイヤー内に収まりません。助けて..ここにhtmlコードがあります：

<div id="layout-panel">
        <div id="tile-container">
            <div id="tiles-panel" data-bind="foreach: data">
                <div class='row-horizontal-tile'>
                    <div class='data-layer'>
                        <div><img data-bind="attr:{src:ImageUrl}" class="stick-image"/></div>                              
                        <div class='text-title' data-bind="text: Title">
                        </div>                 
                    </div>                        
                </div>
            </div>
        </div>
    </div>

上記のhtmlコードのcssを以下に示します。

.row-horizontal-tile
{         
    margin:10px 5px 8px 1%; 
    width: 23%;
    height: 90%;
    display: inline-block;   
}
.data-layer
{    
    color:#ffffff;    
    font-family:Calibri;        
    text-align:inherit;     
    color:Black; 
    background-color: white;
    height: 100%;
    width:100%;
    border-width: 3px;
    border-style:outset;     
} 
.stick-image
{    
    height: 100%;
    width:100%;  
    background-color: white;
}    
.text-title
{   
    font-family: DokChampa;
    font-size: large;
    text-align:center;
}
#layout-panel
{
    background-color: #444444;
    width: 100%;
    height: 70%; 
}
#tile-container
{
    height: 80%;
    width: 90%;
    background-color:#CCCCCC;
    position:relative;    
    top: 10%;  
    left: 5%; 
}
#tiles-panel
{   
    height: 100%; 
    white-space:nowrap;
    overflow-x:hidden;  
    overflow-y:hidden; 
}

前もって感謝します..

4

1 に答える 1

1

次のクラスにこれらのプロパティを追加すると、次のことが役立つ場合があります。

.data-layer{ position:relative;}

.text-title{ position:absolute; z-index:9; bottom:5px; right:5px;}
于 2012-07-18T04:48:20.537 に答える