在div中对齐css位置不起作用

Question

我正在尝试将两个输入框放入div中，并将背景设置为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

工作演示

＆＃13;

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您需要做一些更改。首先，将你的跨度改为div（不太确定这是否是必要的）。然后给你的Chart0一个“position：relative”和你的div x_axis和y_axis位置绝对。现在你可以用左移动它们：0和底部：0到底部（x_axis）。

并为您的背景：使用“background-repeat：none”不重复它。对于中间对齐，“background-position：50％50％”。