在下面的小提琴中:
http://jsfiddle.net/LkqTU/10002/
我试图保持2A
在原地不动,而不是在被介绍时1A
或被1B
介绍时移动。我尝试过使用位置和显示属性,但不知道如何2A
在不移动的情况下保持正确的位置。
CSS:
.first {
float: right;
position: relative;
bottom: 30px;
}
.second {
float: right;
position: relative;
left: 24px;
}
.container {
width: 170px;
}
HTML:
<div class="container">
<p>title:</p>
<input>
<!-- ko if: showTop -->
<span data-bind="if: showFirst">
<i class="first">1A</i>
</span>
<span data-bind="if: !showFirst()">
<i class="first">1B</i>
</span>
<!-- /ko -->
<span data-bind="if: showSecond">
<i class="second">2A</i>
</span>
<button data-bind="click: toggleFirst">toggle 1 value</button>
<button data-bind="click: toggleFirstVisibility">toggle 1 visibility</button>
<p data-bind="text: showFirst"></p>
<p data-bind="text: showSecond"></p>
</div>
我怎样才能2A
保持原状?