固定宽度布局，一个孩子横跨全屏宽度

我可以在下面的图片上创建一个布局，而只在父容器上设置固定宽度吗？我也不能使用position: absolute; left: 0; right: 0;全屏宽度子，因为我不能从流中删除它，因为它的大小是动态的。固定宽度布局，一个孩子横跨全屏宽度

我无法更改标记。

我能想到的唯一的解决办法是设置在每个固定宽度的孩子分别固定宽度，但我有很多的人，这不是最舒适的解决方案 - 用于添加类为每一个孩子说我添加到父容器中。

下面是一个例子标记您可以发布一个解决方案。

HTML

<div class="fixed-width-container"> 
    <div class="regular-child"></div> 
    <div class="full-screen-width-child"></div> 
    <div class="regular-child"></div> 
    <div class="regular-child"></div> 
</div>

CSS

.fixed-width-container { 
    width: <some-fixed-width>; 
}

来源

2017-07-04 Robert Kusznier

相关 - https://stackoverflow.com/questions/28565976/css-how-to-overflow从全角到全角 –

基本上，**除非**完整宽度的元素仅用于样式...您不能单独使用CSS来完成此操作，而不必在给定约束条件的情况下更改HTML 。 –

@Paulie_D：这就是我的想法，但想确保我不会错过任何东西。谢谢。顺便说一句我认为CSS Grid可以做到这一点，但我们都知道到目前为止它对它的支持程度如何。 –

你可以给一个尝试柔性布局：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

* { 
 
    margin: 0; 
 
    padding: 0; 
 
    box-sizing: border-box; 
 
    text-align: center; 
 
} 
 

 
body { 
 
    margin: 0; 
 
} 
 

 
div { 
 
    border: 1px solid #333; 
 
} 
 

 
.fixed-width-container { 
 
    width: 400px;/* any width set */ 
 
    margin: auto; 
 
    padding: 10px 10px 0; 
 
    background: yellow; 
 
    display: flex; 
 
    flex-flow: column; 
 
    align-items: center; 
 
} 
 

 
.fixed-width-container>div { 
 
    height: 3em; 
 
    margin-bottom: 10px; 
 
    background: lightblue; 
 
    min-width: 100%; 
 
} 
 

 
.full-screen-width-child { 
 
    width: 99vw;/* 100vw is fine too */ 
 
}

<div class="fixed-width-container"> 
 
    <div class="regular-child">Fixed-width child</div> 
 
    <div class="full-screen-width-child">Full screen width child with dynamic contents</div> 
 
    <div class="regular-child">Fixed-width child</div> 
 
    <div class="regular-child">Fixed-width child</div> 
 
</div>

codepen to test and play with

来源

2017-07-04 16:37:10

确实可行！正是我在找的东西。谢谢！我制作了一支笔来试验您的解决方案：https：// codepen。io/anon/pen/vZrNXm。你可以将它链接到你的答案;也许有人会发现它有帮助 –

不幸的是'宽度：100vw;'引入了另一个问题 - 垂直滚动条（如此处所述：https://stackoverflow.com/questions/23367345/100vw-causing-horizontal-overflow-but-only-if - 更多 - 比 - 一个＃23367686）。但是这个答案传达了问题的所有标准，所以我不接受它。 –

今天我想通了'html {overflow-y：scroll; }'用滚动条修复了这个问题。我建议将其添加到您的答案中。 –

这仅仅是一个尝试，可能不是一个很好的一个。但也许它会产生一些更复杂的解决方案，其他人甚至是你自己。

理念：为全宽子切缘阴性。

* { 
 
    box-sizing: border-box; 
 
    text-align: center; 
 
} 
 

 
body { 
 
    width: 100%; 
 
    background: #fff; 
 
} 
 

 
div { 
 
    border: 1px solid #333; 
 
    margin-bottom: 10px; 
 
} 
 

 
div:last-child { 
 
    margin-bottom: 0; 
 
} 
 

 
.fixed-width-container { 
 
    width: 70%; 
 
    margin: auto; 
 
    padding: 10px; 
 
    background: LightYellow; 
 
} 
 

 
.regular-child, 
 
.full-screen-width-child { 
 
    height: 45px; 
 
    line-height: 45px; 
 
    background: LightBlue; 
 
} 
 

 
.full-screen-width-child { 
 
    margin-left: -24%; 
 
    margin-right: -24%; 
 
    background: LightGreen; 
 
}

<div class="fixed-width-container"> 
 
    <div class="regular-child">Fixed-width child</div> 
 
    <div class="full-screen-width-child">Full screen width child with dynamic contents</div> 
 
    <div class="regular-child">Fixed-width child</div> 
 
    <div class="regular-child">Fixed-width child</div> 
 
</div>

这里的问题部分是负利润的尺寸。如果您使用%，它将与fixed-width-container的width相关。在这里，我选择了width: 70%。给定625px（如Stack Snippet预览的情况）的机身宽度和-24%的边距，这将给出625px * 0.7 * 0.24 = 105px的负边距。我不确定在任何配置下进行这项工作的最佳方法是什么。

来源

2017-07-04 16:25:37 domsson

固定宽度布局，一个孩子横跨全屏宽度

回答

相关问题