如果我为跨度指定左侧和右侧,则预期的行为是什么

时间:2015-12-17 11:00:53

标签: html html5 css3 css-position

以下是包含position:absolute; top:0px; left:0px; right:0px;

的范围的类
.textStyle1 {
  font-size:24px;
  font-family:'Arial';
  position:absolute;
  top:0px;
  left:0px;
  right:0px;
}

#div1 {
 position:absolute;
 left:100px;
 top:100px;
 width:200px;
 height:200px;
}

#div2 {
 position:absolute;
 left:100px;
 top:100px;
 width:200px;
 height:200px;
 writing-mode:tb-rl;
}

用于放置在span s

内的div
<div id="div2">
 <span class="textStyle1">Some text</span>
 <span class="textStyle1" style="left:2px; top:30px;">Another line of text</span>
</div>

<div id="div2">
 <span class="textStyle1">Some text</span>
 <span class="textStyle1" style="left:2px; top:30px;">Another line of text</span>
</div>

.textStyle1 {
  font-size: 24px;
  font-family: 'Arial';
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
}

#div1 {
  position: absolute;
  left: 50px;
  top: 100px;
  width: 200px;
  height: 200px;
  background-color: Yellow;
}

#div2 {
  position: absolute;
  left: 270px;
  top: 100px;
  width: 200px;
  height: 200px;
  writing-mode: tb-rl;
  -webkit-writing-mode: vertical-rl;
  background-color: Cyan;
}
<div id="div1">
  <span class="textStyle1">Some text</span>
  <span class="textStyle1" style="left:2px; top:30px;">Another line of text</span>
</div>

<div id="div2">
  <span class="textStyle1">Some text</span>
  <span class="textStyle1" style="top:2px; right:30px;">Another line of text</span>
</div>

虽然内部元素显得恰到好处,但我不清楚左边和下边的位置是如何计算的。是对的。 我可以假设另一个会被忽略(基于写入模式)。这个问题特定于跨度元素。

3 个答案:

答案 0 :(得分:1)

您应该期望跨度消耗最近父级的整个宽度,其位置为:relative set。

如果父级没有位置:相对设置,跨度将消耗窗口的宽度。

答案 1 :(得分:1)

如果浏览器希望符合W3C标准,则

topleft优先于bottomright

  

如果全部三个&#39; left&#39;,&#39; width&#39;和&#39; right&#39;是&#39; auto&#39;:首先设置任何&#39; auto&#39; &#39; margin-left&#39;的值和&#39; margin-right&#39;到0.然后,   如果&#39;方向&#39;建立的元素的属性   包含静态位置的块是&#39; ltr&#39;设置&#39;离开&#39;对静态   立场并在下面适用第三条规则;否则,设置正确的&#39;至   静态位置并在下面应用规则第一。

     

如果三者中没有一个是&#39; auto&#39;:如果两者都是&#39;自我保留&#39;和&#39; margin-right&#39;是&#39; auto&#39;,解决额外的等式   约束,两个边距得到相等的值,除非这样   使它们为负,在这种情况下,当包含的方向   阻止是&#39; ltr&#39; (&#39; rtl&#39;),设置&#39; rt-left&#39; (&#39; margin-right&#39;)为零和   解决'保证金权利'&#39; (&#39;利润率左&#39)。如果其中一个边距离开&#39;要么   &#39;余量右&#39;是&#39; auto&#39;,解决该值的等式。如果   值过度约束,忽略&#39; left&#39; (如果是   &#39;方向&#39;包含块的属性是&#39; rtl&#39;)或&#39; right&#39; (在   案例&#39;方向&#39;是&#39; ltr&#39;)并解决这个价值。

     

否则,请设置&#39; auto&#39; &#39; margin-left&#39;的值和&#39; margin-right&#39;为0,并选择适用的以下六个规则之一。

     

&#39;左&#39;和#&#39;宽度&#39;是&#39; auto&#39;并且&#39;对&#39;不是自动&#39;然后宽度缩小到适合。然后解决'左'&#39;   &#39;左&#39;并且&#39;对&#39;是&#39; auto&#39;和#&#39;宽度&#39;不是&#39;自动&#39;然后如果&#39;方向&#39;建立的元素的属性   包含静态位置的块是&#39; ltr&#39;设置&#39;离开&#39;对静态   位置,否则设置正确&#39;到静态位置。然后解决   &#39;左&#39; (如果&#39;指示是&#39; rtl&#39;)或&#39;正确&#39; (如果&#39;方向&#39;是&#39; ltr&#39;)。       &#39;宽度&#39;并且&#39;对&#39;是&#39; auto&#39;并且&#39;离开&#39;不是自动&#39;然后宽度缩小到适合。然后解决'对'&#39;       &#39;左&#39;是&#39; auto&#39;,&#39; width&#39;并且&#39;对&#39;不是&#39; auto&#39;然后解决&#39; left&#39;       &#39;宽度&#39;是&#39; auto&#39;,&#39; left&#39;并且&#39;对&#39;不是&#39;自动&#39;然后解决宽度&#39;       &#39;右&#39;是&#39; auto&#39;,&#39; left&#39;和#&#39;宽度&#39;不是&#39;自动&#39;然后解决&#39;对&#39;

http://www.w3.org/TR/CSS2/visudet.html

中的

答案 2 :(得分:1)

您会期望使用width: 100%获得类似的结果。例如:

&#13;
&#13;
.container {
  height: 400px;
  width: 400px;
  position: relative;
}
.red {
  position: absolute;
  top: 100px;
  left: 0;
  right: 0;
  bottom: 100px;
  background: rgba(255, 0, 0, .33);
}
.green {
  position: absolute;
  top: 0;
  left: 100px;
  right: 100px;
  bottom: 0;
  background: rgba(0, 255, 0, .33);
}
.blue {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 266, .33);
}
&#13;
<div class="container">
  <div class="blue">Full Size</div>
  <div class="red">Full Width</div>
  <div class="green">Full Height</div>
</div>
&#13;
&#13;
&#13;