製作嵌套的子元素全寬

Question

我想維護標記結構並且讓嵌套的子元素走全屏寬度以具有不同的背景色。

HTML example can be seen here (fiddle)

li { 
 
    float: left; 
 
    width: 50%; 
 
    outline: 1px solid pink 
 
} 
 

 
.section-bg-color { 
 
    display: inline-block; 
 
    background-color: gray; 
 
} 
 

 
.page-bg-color { 
 
    background-color: yellow; 
 
}

<div class="page-bg-color"> 
 
    <div class="section-bg-color"> 
 
    <ul class="addon-list"> 
 
     <li> 
 
     <div class="header">1 Headline</div> 
 
     <div class="hidden-content" id="1" style="display: none;">Hidden content</div> 
 
     </li> 
 
     <li> 
 
     <div class="header">2 Headline</div> 
 
     <div class="hidden-content" id="2" style="display: block;">Hidden content is shown</div> 
 
     </li> 
 
     <li> 
 
     <div class="header">3 Headline</div> 
 
     <div class="hidden-content" id="3" style="display: none;">Hidden content</div> 
 
     </li> 
 
     <li> 
 
     <div class="header">4 Headline</div> 
 
     <div class="hidden-content" id="4" style="display: none;">Hidden content</div> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</div>

這是我有：

通緝的結果：

Answer 1

讓您的隱藏div伸展全寬的唯一方法是絕對地定位它們，並且只有在沒有定位到頁面div的父母時纔會工作。除此之外，我假設您使用js來隱藏/顯示這些div，因此當您顯示div時，您需要向包含li添加一些底部邊距以爲隱藏內容騰出空間。

這裏是我的意思快速樣機：

$('.header').hover(function() { 
 
    var title = $(this), 
 
     content = $(this).next(); 
 
     
 
    content.show(); 
 
    title.parent().css('margin-bottom', content.outerHeight()); 
 
}, 
 
function() { 
 
    var title = $(this), 
 
     content = $(this).next(); 
 
     
 
    content.hide(); 
 
    title.parent().css('margin-bottom', 0); 
 

 
});

li { 
 
    float: left; 
 
    width: 50%; 
 
    outline: 1px solid pink 
 
} 
 
li:nth-child(odd) { 
 
    clear:left; 
 
} 
 
.section-bg-color { 
 
    width:50%; 
 
    display:inline-block; 
 
    background-color: gray; 
 
} 
 

 
.page-bg-color { 
 
    background-color: yellow; 
 
    position:relative; 
 
} 
 

 
.hidden-content { 
 
    position:absolute; 
 
    left:0; 
 
    right:0; 
 
    background:lightblue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="page-bg-color"> 
 

 

 
<div class="section-bg-color"> 
 
<ul class="addon-list"> 
 
    <li> 
 
    <div class="header">1 Headline</div> 
 
    <div class="hidden-content" id="1" style="display: none;">Hidden content 1</div> 
 
    </li> 
 
    <li> 
 
    <div class="header">2 Headline</div> 
 
    <div class="hidden-content" id="2" style="display: none;">Hidden content is shown</div> 
 
    </li> 
 
    <li> 
 
    <div class="header">3 Headline</div> 
 
    <div class="hidden-content" id="3" style="display: none;">Hidden content 3</div> 
 
    </li> 
 
    <li> 
 
    <div class="header">4 Headline</div> 
 
    <div class="hidden-content" id="4" style="display: none;">Hidden content 4</div> 
 
    </li> 
 
</ul> 
 
</div> 
 
</div>

Updated fiddle

Answer 2

嘗試：

li { 
    float: left; 
    width: 50%; 
    outline: 1px solid pink 
} 

.section-bg-color { 
    //display:inline-block; 
    background-color: gray; 
} 

.page-bg-color { 
    background-color: yellow; 
    padding: 5px 10px; 
} 

.addon-list { 
    content: ""; 
    display: table; 
    clear: both; 
} 

Answer 3

li { 
 
    float: left; 
 
    width: 50%; 
 
    outline: 1px solid pink 
 
} 
 

 
.section-bg-color { 
 
    display: block; 
 
    background-color: gray; 
 
} 
 

 
.page-bg-color { 
 
    background-color: yellow; 
 
} 
 

 
.clr { 
 
    clear: both; 
 
}

<div class="page-bg-color"> 
 

 

 
    <div class="section-bg-color"> 
 
    <ul class="addon-list"> 
 
     <li> 
 
     <div class="header">1 Headline</div> 
 
     <div class="hidden-content" id="1" style="display: none;">Hidden content</div> 
 
     </li> 
 
     <li> 
 
     <div class="header">2 Headline</div> 
 
     <div class="hidden-content" id="2" style="display: block;">Hidden content is shown</div> 
 
     </li> 
 
     <li> 
 
     <div class="header">3 Headline</div> 
 
     <div class="hidden-content" id="3" style="display: none;">Hidden content</div> 
 
     </li> 
 
     <li> 
 
     <div class="header">4 Headline</div> 
 
     <div class="hidden-content" id="4" style="display: none;">Hidden content</div> 
 
     </li> 
 
     <div class="clr"></div> 
 

 
    </ul> 
 
    </div> 
 
</div>

提琴手鍊接https://jsfiddle.net/e3sngy3s/8/

Answer 4

這是醜陋的，但你可以用負margin和viewport單位東西..

我已使用pseudoelement使其伸展到左邊緣。

fiddle

body { 
 
    margin: 0; 
 
} 
 

 
li { 
 
    float: left; 
 
    width: 50%; 
 
    outline: 1px solid pink 
 
} 
 

 
.section-bg-color { 
 
    display: inline-block; 
 
    background-color: gray; 
 
} 
 

 
.page-bg-color { 
 
    background-color: yellow; 
 
} 
 

 
.hidden-content { 
 
    width: calc(100vw - 40px); 
 
    margin-left: -100%; 
 
    background: orange; 
 
    padding: 2% 0%; 
 
    position: relative; 
 
} 
 

 
.hidden-content:after { 
 
    content: ''; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    bottom: 0; 
 
    background: orange; 
 
    width: 3em; 
 
    margin-left: -3em; 
 
}

<div class="page-bg-color"> 
 
    <div class="section-bg-color"> 
 
    <ul class="addon-list"> 
 
     <li> 
 
     <div class="header">1 Headline</div> 
 
     <div class="hidden-content" id="1" style="display: none;">Hidden content</div> 
 
     </li> 
 
     <li> 
 
     <div class="header">2 Headline</div> 
 
     <div class="hidden-content" id="2" style="display: block;">Hidden content is shown</div> 
 
     </li> 
 
     <li> 
 
     <div class="header">3 Headline</div> 
 
     <div class="hidden-content" id="3" style="display: none;">Hidden content</div> 
 
     </li> 
 
     <li> 
 
     <div class="header">4 Headline</div> 
 
     <div class="hidden-content" id="4" style="display: none;">Hidden content</div> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</div>

編輯

爲了使這項工作對所有隱藏的div你可以在列表項使用nth-of-type選擇。

fiddle

Answer 5

嘗試增加

.yourSelectorForDesiredContent { 
    margin-left: -100%; 
    background-color: yourColourCode; 
} 

那應該把它在屏幕上你。不是最漂亮的方式，但應達到你想要的結果。