使子元素在一個方向上比父元素更寬

我在嘗試一個居中的雙列布局，並且我想在右列中有水平線規則將所有的方式都擴展到瀏覽器視口的右邊緣。這將要求這些元素比它們所包含的父列更寬，但僅限於右側。使子元素在一個方向上比父元素更寬

下面是一個例子形象：

Example http://sans-concept.com/temp/layout.jpg

這裏是在的jsfiddle快速樣機，用的HR已經到位，但尚未容器沒有外部延伸：

這讓我接近：

hr { 
    position: absolute; 
    left: 0; 
    right: 0; 
}

但它將HR擴展到整個頁面，而不僅僅是右側。對此有何想法？謝謝！

來源

2012-02-27 Eric Carl

你能設置一個[jsfiddle]（http://jsfiddle.net），它儘可能地接近你想要的效果嗎？一定要取消選中「規範化CSS」框。 – 2012-02-27 23:50:31

p.s.你是如何製作你美麗的模型的？ – paislee 2012-02-28 00:10:54

當然，jsfiddle樣機在這裏： http://jsfiddle.net/ericcarl/3fQKe/ 和paislee，模型圖像剛剛放在一起使用Photoshop。很高興你挖！ – 2012-02-28 00:17:52

如果你確定你的整個創建是在屬性的屏幕大小的div內overflow：hidden; 然後你可以讓它們無限長，最終用戶不應該知道。

類似寬度：500％; 應該做的伎倆。

http://jsfiddle.net/hx2YF/

這裏有一個小提琴。拖動結果窗口的大小足以查看結果。

來源

2012-02-28 00:51:57 rfinz

這是一個聰明的解決方案，似乎工作得很好。謝謝rfinz！ – 2012-02-28 00:58:13

不客氣！在過去的幾天裏，在CSS中已經佈置了很多東西。：P – rfinz 2012-02-28 01:02:24

實際上，我會想出一個更好的解決方案 - 它在較老的瀏覽器中也非常合適地處理這個問題。做得好！ :) – Nightfirecat 2012-03-01 05:12:06

如果右列是透明的，您可以在body標籤上使用背景圖片，但只有在規則在文檔中具有固定位置時（例如在標題中）才能使用。

來源

2012-02-27 23:44:23 koenpeters

感謝您的建議，不幸的是，他們沒有一個固定的位置，所以不會爲我工作。規則將貫穿整個內容，隨着內容的變化需要更改位置。 – 2012-02-27 23:56:03

我已經創建了十個啓動器，您可以view on JS Fiddle。

我用下面的示例HTML和CSS

HTML

<div id="example"> 
    <h1>Example</h1> 
    <p>Example text followed by a horizontal rule 
     example text followed by a horizontal rule 
     example text followed by a horizontal rule.</p> 
    <hr> 
    <p>Example text followed by a horizontal rule 
     example text followed by a horizontal rule 
     example text followed by a horizontal rule.</p> 
    <hr> 
</div>

CSS

#example { 
    width: 50%; 
    margin: 0 auto; 
    background-color: #FCFCFC;  
} 

#example hr { 
    width: 150%;  
}

固定Pixed寬度

你可以得到一個相同的最終結果固定的像素寬度，但它更加煩瑣。

我已將您的示例分爲demonstrate this solution on JSFiddle。

根據您所提供的HTML，CSS的是：

body { 
    overflow-x: hidden; 
} 

.wrapper { /* Center the layout */ 
    width:800px; 
    margin:0 auto; 
} 

.leftCol { /* Left column */ 
    width:200px; 
    float:left; 
    background-color:#ccc; 
    margin:0; 
} 
.rightCol { /* Right column */ 
    width:600px; 
    float:right; 
    background-color:#dadada; 
    margin:0; 
} 
hr { 
    /* Make the HR extend to the 
    right edge of the viewport, 
    outside of .rightCol*/ 
    width: 200%; 
} 

@media only screen and (max-width: 800px) { 
    body { 
     overflow-x: auto; 
    } 
    hr { 
     width: 100%; 
    } 
}

請注意，這個解決方案的最後部分使用媒體查詢重置值時，視口被調整低於800像素的在這一點上你確實想要允許水平滾動條。媒體查詢在某些較舊的瀏覽器中無法使用，因此您需要在您想要支持的瀏覽器中進行測試。最糟糕的情況是您的用戶無法在舊版瀏覽器中水平滾動。

來源

2012-02-27 23:58:09 Fenton

謝謝Sohnee。我的佈局固定了所有列的像素寬度（請檢查我的jsfiddle樣機：http://jsfiddle.net/ericcarl/3fQKe/），所以我不確定百分比方法是否可行。我嘗試在我的小提琴中使用100 +以上的百分比，當它們在容器外延伸時，他們創建了一個水平滾動條。 – 2012-02-28 00:25:15

@EricCarl我在我的答案中增加了一個「後半部分」，它特別適用於您的示例 - 我希望它有幫助。 – Fenton 2012-02-28 10:03:32

這裏的困難在於，對於像素的完美性，必須知道容器的左邊緣和視口右端之間的距離。請參閱@ animuson的（悲觀的）佐證答案。我在這類情況選擇jQuery的：

#container {   
    position: relative; /*hr will start at the left edge of the container*/ 
} 
#container hr { 
    left: 10px; 
    position: absolute; 
}

在jQuery然後打補丁並運行此

$(document).ready(function() { 
    // calculate the width  account for container padding vv 
    var w = $(window).width() - $('#container').offset().left - 10; 
    // apply the width 
    $('#container hr').width(w); 
});

DEMO

UPDATE

DEMO - 適應窗口重新大小。

來源

2012-02-28 00:09:10 paislee

謝謝一堆paislee，這可能是我的首選解決方案。由於這是在頁面加載時計算出來的，如果我調整瀏覽器的大小並不更新，但我認爲還有一個解決方案。 – 2012-02-28 00:37:16

@EricCarl是的。只需將邏輯提取到一個函數FOO中，如$（document）ready（FOO）;'和$（window）.resize（FOO）;''將發佈demo .. – paislee 2012-02-28 00:43:07

絕對定位的元素無法同時知道其直接父元素的左側和根元素的右側。另外，通過將水平線的規則定位在絕對位置，您將從文檔流中移除它們，這樣您的文本就會在它們下面摺疊起來。然後你必須添加額外的填充等來將其推回。

由於您沒有使用預定義的寬度位置，其中所有與明確在頁面上，沒有任何方法可以得到這個完美。您可以使<hr>僅比其父項大（例如），但它不會完全按照每個屏幕尺寸一直延伸到視口邊緣（有些將推過去創建水平滾動條）。

來源

2012-02-28 00:17:01 animuson

有道理，非常感謝幫助animuson。 – 2012-02-28 00:35:06

使子元素在一個方向上比父元素更寬

回答

相關問題