使元素搬出容器

示例HTML/CSS：使元素搬出容器

.wrapper { 
 
    width: 100%; 
 
} 
 
.container { 
 
    width: 400px; 
 
    margin: 0 auto; 
 
    border: 1px solid; 
 
}

<div class="wrapper"> 
 
    <div class="container"> 
 
    <div class="element">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi libero veritatis dolores facere, eaque aspernatur, magnam repellendus eveniet, ullam magni accusamus accusantium itaque a illo totam vitae. In, earum quos.</div> 
 
    </div> 
 
</div>

如果有任何機會的.element左邊緣移動到.wrapper左邊緣，而其右邊緣撐捕捉到.container的右邊緣。換句話說，我想通過向.element添加一些規則來覆蓋.container的左邊距。我試過類似的東西：

.element { 
    margin-left: -100% 
}

但它移動了整個元素，如我所料。

來源

2015-11-30 pufflik

嗯......這真的取決於你爲什麼需要這樣做。如果你能澄清它可能有幫助的原因。目前這聽起來像是一個[** XY問題**]（http://meta.stackexchange.com/questions/66377/what-is-the-xy-problem） –

其實，這是一個原因。 Designer將所有內容放入一定寬度的容器中。但是其中一個內容塊的左邊緣與身體對齊，而其右邊緣仍然與容器對齊。 – pufflik

您可以在元素位置絕對相對到.wrapper，然後用calc()，以確定哪些50% - 200px是：

Example Here - 邊框增加了演示的目的。。

.wrapper { 
 
    width: 100%; 
 
    position: relative; 
 
} 
 
.container { 
 
    width: 400px; 
 
    height: 60px; 
 
    margin: 0 auto; 
 
    border: 2px solid; 
 
} 
 
.element { 
 
    position: absolute; 
 
    left: 0; 
 
    right: calc(50% - 200px); 
 
    border: 2px solid #f00; 
 
}

<div class="wrapper"> 
 
    <div class="container"> 
 
    <div class="element">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi libero veritatis dolores facere, eaque aspernatur, magnam repellendus eveniet, ullam magni accusamus accusantium itaque a illo totam vitae. In, earum quos.</div> 
 
    </div> 
 
</div>

來源

2015-11-30 16:15:38

以及我想我需要研究css3 :) –

那麼，必須是最好的解決方案可用。雖然它不會使用'max-width'，我想沒有其他解決方案沒有javascript。感謝Josh Crozier。 – pufflik

你可以設置一個位置，但是你需要javascript來計算正確的寬度。

.element { 
    position:absolute; 
    left:0; 
}

JQuery的

$(document).ready(function() { 
    var w = ($(".container").outerWidth()/2) + $(".container").width(); 
    $(".element").width(w); 
});

來源

2015-11-30 16:11:24

不是最好的選擇，至於我。隨着jQuery involoved而我會計算負邊距。我試圖避免「位置：絕對」，因爲它打破了容器元素的高度。 Josh Crozier的解決方案對我來說更可取。不過謝謝。 – pufflik

使元素搬出容器

回答

相關問題