使嵌套的子元素全宽

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>

dense_rank()

Answer 2

很难看，但你可以用负viewport和pseudoelement单位做点什么..

我使用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; }使其向左边缘延伸。

fiddle

＆＃13;

＆＃13;

<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>

＆＃13;

nth-of-type

＆＃13;

＆＃13;

＆＃13;

修改

要使所有隐藏的div工作，您可以使用列表项上的function Get-PasswordThing { Param ( [Parameter(Mandatory=$true)] [ValidateNotNullOrEmpty()] [Security.SecureString]$password=$(Throw "Password required.") ) Process { Write-Host "cool" } } [string]$password = "hello" [Security.SecureString]$securePassword = ConvertTo-SecureString $password -AsPlainText -Force Get-PasswordThing -password $securePassword # inline Get-PasswordThing -password (ConvertTo-SecureString $password -AsPlainText -Force) 选择器。

fiddle

Answer 3

尝试添加

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

那应该为你拉屏幕。不是最漂亮的方式，但应该达到你想要的结果。

Answer 4

尝试：

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 5

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>

fiddler链接是https://jsfiddle.net/e3sngy3s/8/