在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:relative ，并将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位置设为绝对。 现在，您可以将它们向左移动：0，将底部：0移到底部（x_axis）。

并针对您的背景：使用“ background-repeat：无”来不重复此操作。 和“背景位置：50％50％”（中间对齐）。