HTML元素单向拉伸？

Question

如果我想让HTML元素只填充一个方向怎么办？通常宽度：100％只填充整个页面，所以如果我想要一个元素结束一个方向并且永远不会朝另一个方向结束。我举了一个小例子来解释我的意思。

我试着考虑一些这样做的方法，所以我可以在这里分享它们并且更有用但我无论如何都无法想到如何做到这一点。

Answer 1

这样的东西有用吗？

.funny-box{
  width: 100%;
  position: relative;
  right: 80%;
 }

或者，如果您想在页面的同一行显示更多内容。

<div class="special-row">
  <div class="funny-box"></div>
  <div class="regular-box"></div>
</div>

.special-row{
  position: relative;
}

.funny-box{
  width: 100%; /** or any width you want, but it needs a width **/
  position: absolute;
  right: 80%;
}
.regular-box{
  margin-left: 20%; /* flow normally, leave room for .funny-box */
}

要记住的重要一点是.funny-box需要一个明确的宽度。 如果你想要，你可以使用javascript来确保它至少到达窗口的最左边。

在jQuery（其他库，以及不使用库的选项，可用）中，您可以这样做：

$('.funny-box').width($(window).width());

这意味着该框始终是窗口的宽度，因此，如果您按照建议的方式定位，它将始终超出窗口的左侧。 正如Jon非常正确地指出的那样，css中没有“永远”这样的东西，但你可以使用这种方法为用户提供永远持续的印象。

我推荐一个内部div .funny-box，浮动到右边并清除，所以你的东西总是在屏幕上。