對齊在div中的css位置不工作

Question

我想將兩個輸入框放入div並設置div的圖像的背景。我的股利如下：

<div id="Chart0"> 
<span class="x_axis" > 
<label> 
<b>X-Axis:</b> 
</label> 
<input type="text" value="@VAL([Test1Q1].[Site Name])"> 
</span> 
<span class="y_axis" > 
<label> 
<b>Y-Axis:</b> 
</label> 
<input type="text" value="@VAL([Test1Q1].[Bandwidth])"> 
</span> 
</div> 

我的主要問題是高度和DIV的寬度可以通過JavaScript和當DIV的高度和寬度改變輸入框都被固定在自己的位置而改變。

x軸需要設置在左下方，y軸在右上方如圖所示。我曾試圖與下面的CSS

.x_axis{ 
float:left; 
margin-top:170px; 
} 
.y_axis{ 
    float:right; 
} 

，我還需要設置背景圖片在沒有重複的div中，如果DIV高度寬度得到改變它必須被固定在中間位置。

div{ 

    background-image:url(../images/pies.jpg); 
    background-size: 100%; 

} 

但問題是，當我改變的div和輸入框位置的高度也改變了圖像重複。我無法弄清楚我該怎麼做？

Answer 1

你可以設置一個position:relative父DIV和應用position: absolute到內部跨度：

#Chart0 { 
    position: relative; 
    background-image: url('path/to/your/image.png'); 
    background-repeat: no-repeat; 
    background-size: cover; 
    background-position: 50% 50%; 
} 

.x_axis { 
    position: absolute; 
    left: 0; 
    bottom: 0; 
} 

.y_axis { 
    position: absolute; 
    right: 0; 
    top: 0; 
} 

對於背景圖像，檢查出background-size財產。您可以使用background-size: cover

工作演示

#Chart0 { 
 
    width: 70%; 
 
    height: 400px; 
 
    position: relative; 
 
    border: 1px solid #333; 
 
    background-image: url('http://www.techinsights.com/uploadedImages/Public_Website/Content_-_Primary/Teardowncom/Sample_Reports/sample-icon.png'); 
 
    background-size: cover; 
 
    background-repeat: no-repeat; 
 
    background-position: 50% 50%; 
 
} 
 

 
.x_axis { 
 
    position: absolute; 
 
    left: 0; 
 
    bottom: 0; 
 
} 
 

 
.y_axis { 
 
    position: absolute; 
 
    right: 0; 
 
    top: 0; 
 
}

<div id="Chart0"> 
 
<span class="x_axis" > 
 
<label> 
 
<b>X-Axis:</b> 
 
</label> 
 
<input type="text" value="@VAL([Test1Q1].[Site Name])"> 
 
</span> 
 
<span class="y_axis" > 
 
<label> 
 
<b>Y-Axis:</b> 
 
</label> 
 
<input type="text" value="@VAL([Test1Q1].[Bandwidth])"> 
 
</span> 
 
</div>

Answer 2

你需要做一些改變。首先，將你的跨度改爲div（不太確定這是否必要）。然後給你的Chart0一個「位置：相對」和你的div的x_axis和y_axis位置絕對。現在你可以用left：0和bottom：0移動它們到底部（x_axis）。

和你的背景：使用「background-repeat：none」不要重複它。和「背景位置：50％50％」。