Question

注意：我想我的问题标题与我的真实问题无关（有点）。

这是我的代码：

.one{
  background-color: gray;
}
.two{
  padding: 20px;
}

<div class = "one">
  <div class = "two">
    <span>something</span>
  </div>
</div>

<br>

<div class = "one">
    <span>something</span>
</div>

我需要管理它们两个块看起来是一样的。实际上，div.two在第一时间不存在，并且会在一段时间后添加。因此，我想在div.two追加时保持用户界面不做任何更改。我怎么能这样做？

总之，我需要同时查看两个div.one元素。那可能吗？ （注意我想他们俩都像第一个一样）

Answer 1

是否可以使用visibility: hidden;而不是添加新的？{1}}？而不是仅仅将更改附加到visibility: visible;

.one{
  background-color: gray;
}
.two{
  visibility: hidden;
  padding: 20px;
}

https://jsfiddle.net/Hastig/bx2kwjmw/

或者你可以添加填充到父元素......

.one{
  background-color: gray;
  padding: 20px;
}
.two{

}

https://jsfiddle.net/Hastig/bx2kwjmw/1/

编辑，我正在玩这个，并且看到父div上的填充不是解决方案，因为一旦插入文本，由于文本大小，高度仍会增加。

这是一个新的小提示，显示如何将隐形鬼文本作为占位符进行大小调整，然后在使用插件附加内容时将其删除。

这只是一个想法，应该有很多方法去实现它。

https://jsfiddle.net/Hastig/bx2kwjmw/5/

$('.plugin-append-simulator').click(function() {
  var content = '<div class="two">something</div>';
  $('.one').html('').append(content);
});

// $('.one') | selects .one
// .html('') | removes ghost text
// .append(content) | appends your content

.one {
  background-color: gray;
  padding: 20px;
  color: hsla(0, 0%, 0%, 0);
}
.two {
  color: hsla(0, 0%, 0%, 1);
}


/* scaffolding. ignore this */.plugin-append-simulator { position: fixed;bottom: 0;left: 50%; transform: translateX(-50%);display: inline-flex;padding: 3px 8px 1px 8px;color: white;background-color: black;cursor: pointer;
}.plugin-append-simulator:hover { background-color: red; }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="one">ghost text</div>

<!-- ignore, scaffolding -->
<div class="plugin-append-simulator">simulate plugin append</div>

旧版本，可以将填充从父级切换到子级..

https://jsfiddle.net/Hastig/bx2kwjmw/6/

Answer 2

更改应用填充的位置....

.one{
  background-color: gray;
  padding: 20px;
}
.two{
  padding: 0; /* setting this to 0 should override any previous padding declarations*/
}

如何设置临时填充？

2 个答案: