css - HTML 元素单向拉伸？

Question

如果我想让一个 HTML 元素只填充一个方向怎么办？通常 width: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 中没有“永远”这样的东西，但是你可以给用户一种使用这种方法永远持续下去的印象。

我建议在 .funny-box 内设置一个内部 div，向右浮动并清除，这样你的东西就一直在屏幕上。