HTML挑战

Question

一个容器，其中包含一个水平居中的框和一个垂直居中的框，位于框的左侧或右侧。容器的宽度可以动态改变，因此线也应该（自动）改变其宽度。我希望图像能够很好地解释这一点。

Answer 1

这对我有用

<table cellspacing="0" cellpadding="0" style="height: 100px; width: 500px; background: none repeat scroll 0% 0% Red;">
<tbody><tr>
<td style="width: 50%;">
<div style="border:solid 1px black;"></div>
</td>
<td>
<div style="width: 100px; height: 100px; background: none repeat scroll 0% 0% blue;">test</div>
</td>
<td style="width: 50%;">

</td>
</tr>
</tbody></table>

Answer 2

如果高度是静态的，并且唯一改变的是宽度，只需将该线作为背景重复的线条图像。

Answer 3

这似乎对我有用。我认为盒子的宽度是固定的，所以我必须将线条设为50％并将其隐藏在盒子后面。

的CSS：

.container
{
   height:100px;
   width:30%;
   position:absolute;
   left:100px;
   top:100px;
   border:solid black 1px;
}

.box
{
   position:relative;
   width:100px;
   height:100px;
   margin:0px auto;
   background-color:#eee;
}

.line
{
   width:50%;
   background-color:green;
   position:absolute;
   left:0px;
   top:50%;
   height:10px;
   margin-top:-5px; /*half the height*/
}

HTML：

<div class="container">
   <div class="line"></div>
   <div class="box"></div>
</div>