充满背景,内容固定 [英] Full with background with fixed with content
本文介绍了充满背景,内容固定的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有以下两个容器,它们的总宽度应为1400px.我的代码中的问题是,当我希望两个容器为1400px时,背景的宽度不是100%.
I've got the following two containers that should be 1400px width in total. The problem in my code is that the background isn't 100% width when I want the two containers to be 1400px.
如何才能达到最佳效果?我希望你们能解决我的问题.
How can I achieve this the best way? I hope you guys get my problem.
我正在使用以下代码:
.wrapper {
max-width: 1400px;
margin: 0 auto;
padding: 0 50px;
}
#left-container {
width: 50%;
background: blue;
float: left;
}
#right-container {
width: 50%;
background: green;
float: left;
}
<div class="wrapper">
<div id="left-container">
<h2>Left container</h2>
</div>
<div id="right-container">
<h2>Right container</h2>
</div>
</div>
推荐答案
可以用很多方法来完成.我现在想到的最简单的解决方案是添加一个容器并使用线性渐变:
It can be done in many ways. The most simple solution I can think of now is to add a container and use a linear gradient:
body {margin:0; padding:0;}
.container {
background: linear-gradient(to left, blue 50%, green 50%);
}
.wrapper {
border: 1px solid white;
max-width: 1400px;
margin: 0 auto;
overflow: auto;
}
#left-container,
#right-container{
box-sizing: border-box;
width: 50%;
float: left;
padding-left: 50px;
}
<div class="container">
<div class="wrapper">
<div id="left-container">
<h2>Left container</h2>
</div>
<div id="right-container">
<h2>Right container</h2>
</div>
</div>
</div>
这篇关于充满背景,内容固定的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文