我有一个设计,我需要创建一个前端版本,我正在努力弄清楚如何编码设计中提供的一些元素。特别是流体容器(流体,如在容器中水平伸展100%),从屏幕的一端开始但几乎在屏幕的中间结束。如果它在屏幕中间结束会很容易,但它应该在侧边栏开始的地方结束。
以下是我正在谈论的内容的快速直观表达:
黑色边框代表网站本身的边框(容器),绿色和红色框表示从屏幕一端开始并在中间某处(例如侧边栏开始处)结束的设计元素。
如果有帮助的话,我在bootstrap上对此进行编码。
编辑//这应该也是响应。
答案 0 :(得分:2)
您可以使用伪元素来管理它。
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
height: 100%;
}
body {
height: 100%;
overflow: hidden;
}
.container {
min-height: 100%;
border:3px solid grey;
width: 70%;
margin: auto;
display: flex;
}
main {
flex: 0 0 70%;
border-right:1px solid green;
}
aside {
flex: 0 0 30%;
}
.block {
position: relative;
height: 50px;
}
main .block {
margin-top: 100px;
}
main .block:before {
position: absolute;
content: '';
right: 0;
top:0;
height: 100%;
width: 100vw;
background: rgba(255,0,0,0.5);
}
aside .block {
margin-top: 25px;
}
aside .block:before {
position: absolute;
content: '';
left: 0;
top:0;
height: 100%;
width: 100vw;
background: rgba(0,255,0,0.5);
}
<div class="container">
<main><div class="block"></div></main>
<aside><div class="block"></div></aside>
</div>
注意:HTML布局的布局方式与此无关。我使用flexbox
,因为这就是我现在习惯的。