將div以未定義的寬度定位到右側

Question

我將很難解釋我的意思，但請耐心等待。 首先，這是我的小提琴https://jsfiddle.net/jmajnqej/5/ （由Aziz更新）

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

我正在嘗試讓freelancewrapper擁抱屏幕的右側而沒有填充。 無論窗口有多寬，它都必須保持連接到屏幕的最右側。 為了使其更復雜，它的父div contentwrapper必須以相同的寬度和邊距保留在原處。

這是兩種屏幕尺寸的代表，以顯示我的意思。 http://imgur.com/a/IkOwx

更新：當時我沒有意識到，但這是一個兩部分的問題。 定位很容易，但獲得正確的正確width屬性卻不容易。 這是我的問題，該問題定義了響應div的寬度 。

Answer 1

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

  position: absolute;
  right:0;

jsFiddle叉

如果希望div在滾動時保持與屏幕的連接，則可以用fixed替換absolute 。

請記住， position: absolute相對於具有position:relative的第一個父標記起作用。 默認情況下，該標簽為body 。

還有一點要記住的是，當一個元素被絕對定位時，它將失去其在布局中的空間並懸停在所有元素上。

Answer 2

我無法告訴您要獲得理想結果所需的確切值。 我建議嘗試使您的樣式“快速響應”的建議是：1.從移動優先方法開始（先增大屏幕尺寸，然后縮小尺寸）。

為了進一步回答您的問題，請嘗試使用相對單位。 例如，您的寬度是100％，這是相對的。 但是請嘗試使用em而不是像素。

每〜16 px（不精確）為1.0 em 。

此外，您可以使用position：absolute;

祝你好運。

Answer 3

就像Paulie_D所說的，您可以使用位置

的CSS

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

此處演示

Answer 4

您可以在<div class='contentwrapper'>上使用負右邊距

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

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