将 div 定位到右侧，宽度未定义

Question

我很难解释我的意思，请耐心等待。首先是我的 fiddle https://jsfiddle.net/jmajnqej/5/（由 Aziz 更新）

#freelancewrapper {
width: 100%;
max-width: 1000px;
height: 440px;
background-color: #9D9D9D;
position: absolute;
}

我正在尝试让 freelancewrapper 在没有填充的情况下紧贴屏幕右侧。无论 window 的宽度是多少，它都需要保持连接到屏幕的最右侧。为了使它更复杂，它的父 div contentwrapper 必须保持在原处，具有相同的宽度和边距。

这里有两种屏幕尺寸的表示法来说明我的意思。 http://imgur.com/a/IkOwx

更新： 我当时没有意识到，但这是一个分为两部分的问题。定位它很容易，但获得正确的正确宽度属性却不是。这是我的问题 .

Answer 1

您所要做的就是将以下 CSS 属性添加到您的元素中：

  position: absolute;
  right:0;

jsFiddle fork

如果您希望 div 在滚动时保持附着在屏幕上，您可以将 absolute 替换为 fixed。

请记住，position: absolute 相对于带有 position:relative 的第一个父标签起作用。默认情况下，该标签将是 body.

还有一件重要的事情要记住，当一个元素被绝对定位时，它将在布局中失去它的 space 并悬停在所有元素上。

Answer 2

喜欢Paulie_D说你可以使用position

CSS

.contentwrapper {
    width: calc(100% - 190px);
    max-width: 1160px;
    margin-top: 50px;
    margin-left: 40px;
    position: absolute;
    right:0;
}

DEMO HERE

Answer 3

您可以在 <div class='contentwrapper'>

上使用负右边距

.contentwrapper{
    margin-right: -48px;
}

https://jsfiddle.net/linkers/jmajnqej/3/

Answer 4

我无法告诉您达到预期结果所需的确切值。我建议尝试使您的样式 "responsive" 是从 1. 从移动优先方法开始（更容易增大屏幕尺寸然后缩小尺寸）。

要进一步回答您的问题，请尝试使用相对单位。例如，您的宽度是 100%，这是相对的。但是尝试使用 em.

而不是像素

每 ~16 像素（不精确）为 1.0 em。

此外，您还可以使用 position: absolute;

祝你好运。

将 div 定位到右侧，宽度未定义

Positioning div to the right with an undefined width

html

javascript

css

resize

responsive-design