CSS、express、bootstrap：ページ内のレイアウト

Question

私はこのレイアウトを持っています：What I would like "Resultat"ラベルは画像の下に置いてください。

残念ながら、私が得るものは次のとおりです。What I get "Résultat"ラベルがうまく位置していないことがわかります。ここで

は私のCSSです：

body { 
    background-color: #A6A4AA !important; 
} 

.mainContainer { 
    background-color: #A6A4AA 
} 

.label-selected, .label-unselected, .label-result, .result-field, .label-univers, .label-target { 
    border: solid medium #2C3756; 
    border-radius: 10px; 
    background-color: #E6F0BB; 
    color: #405E01; 
    font-size: 0.75em; 
    padding: 5px; 
    text-align: center; 
} 


.label-target, .label-result, .result-field { 
    margin-top: 2px; 
    font-size: 0.875em; 
    margin-bottom: 0; 
    background-color: #2C3756; 
    text-align: left; 
    color : #FFFFFF; 
    border-radius: 8px; 
} 

.label-target { 
    border-radius: 8px 8px 0 0; 
} 

.label-result, .result-field { 
    margin-bottom: 2px; 
} 

.result-field { 
    background-color: #FFFFFF; 
    color: #2C3756; 
    border-color: #FFFFFF; 
} 

.targetImage { 
    margin: 0; 
    width: 100%; 
    height: auto; 
    border: solid medium #2C3756; 
    border-radius: 0 0 8px 8px; 
    background-color: #A6A4AA; 
    position: relative; 
} 


#targetCol { 
    overflow: hidden; 
    position: absolute; 

} 


.ajustement { 
    opacity: 0.5; 
} 
.label-result, .result-field { 
    float: none !important; 
} 

そして、ここでは私の急行コードです：

<div class="row"> <!-- Row : target   --> 
    <div class= "col-xs-12" id="targetCol"> 
    <img id="target" class="targetImage"></img> 
    <div id="ajustement" class="ajustement"></div> 
    <div id="impact" class="impact"></div> 
    </div> 
</div> 
<div class="row"> <!-- Row : result   --> 
    <div class= "col-xs-3 short-div"> 
    <p class="label-result">R&eacute;sultats</p> 
    </div> 
    <div class= "col-xs-9 short-div"> 
    <p class="result-field" id="resultField">...</p> 
    </div> 
</div> 

、誰もが何が起こっているのか私に説明できますか？

ありがとうございます。

Answer 1

画像を表示するのにposition: relativeを使用していると思います。それは他のdivから独立してそれ自身を設定します。あなたのための画像を使用してみてください位置の代わりにwidth:100%;height:xyz px;を使用しないでください。位置を使用するのは、幅を指定するか、ブートストラップカラムを使用してください。