问题：
侧栏的背景色，HTML，CSS
管翼
我想问你一件困扰我一段时间的事。我现在学习HTML和CSS，我们做了一个功课，我们必须创建一个博客，中间有一篇文章，右边有两个边栏，网站的背景颜色应该是灰色的。问题是主文章和两个边栏应该是白色的底色，所以当我把文章的底色改成白色时，它就自动控制了网站75%以上的区域，甚至是文章之外。这里是一个截图。
我正在尝试制作的内容https://f.v1.n0.cdn.getcloudapp.com/items/0k300n0o0j0c1l1b3k2j/blog-1.png
将侧边栏的背景色更改为白色时得到的内容https://ctrlv.sk/wf4e
null
.main-image {
height: 260px;
width: 670px;
}
.main {
text-align: center;
padding: 40px;
margin-top: -10px;
}
.main2 {
background-color: white;
}
body {
background-color: rgb(243, 243, 243)
}
.line {
margin-top: 50px;
}
hr {
margin-top: -20px;
}
.back {
background-color: white;
}
.box-post {
background: white;
margin-left: 70px;
}
.sideimage {
float: right;
margin-top: -340px;
width: 350px;
margin-right: 100px;
display: block;
}
.sidetext {
text-align: right;
margin-top: -180px;
margin-right: 160px;
}<title>Blog</title>
<link rel="stylesheet" href="styles.css">
<header>
<div class="main2">
<h1 class="main">
<strong>Dopetrope</strong>
</h1>
</div>
<hr>
</header>
<section id="main">
<article class="box-post">
<img class="main-image" src="pic01.jpg" alt="obrazocek">
<header>
<h1>Right sidebar</h1>
<h3>Lorem ipsum dolor sit amet feugiat</h3>
<div>
</div></header>
<p>
</p><section class="box">
<img class="sideimage" src="pic09.jpg">
<h1 class="sidetext2">Sed etiam lorem nulla</h1>
<p class="sidetext">
Lorem ipsum dolor sit amet sit veroeros <br>
sed amet blandit consequat veroeros <br>
lorem blandit adipiscing et feugiat <br>
phasellus tempus dolore ipsum lorem <br>
dolore.
</p>
</section>
<p>
Vestibulum scelerisque ultricies libero id hendrerit. Vivamus malesuada quam faucibus ante <br>
dignissim auctor hendrerit libero placerat. Nulla facilisi. Proin aliquam felis non arcu molestie at <br>
accumsan turpis commodo. Proin elementum, nibh non egestas sodales, augue quam aliquet est, <br>
id egestas diam justo adipiscing ante. Pellentesque tempus nulla non urna eleifend ut ultrices nisi <br>
faucibus. <br><br><br>
Praesent a dolor leo. Duis in felis in tortor lobortis volutpat et pretium tellus. Vestibulum ac ante <br>
nisl, a elementum odio. Duis semper risus et lectus commodo fringilla. Maecenas sagittis convallis <br>
justo vel mattis. placerat, nunc diam iaculis massa, et aliquet nibh leo non nisl vitae porta lobortis, <br>
enim neque fringilla nunc, eget faucibus lacus sem quis nunc suspendisse, nec lectus sit amet <br>
augue rutrum vulputate ut ut mi. Aenean elementum, mi sit amet portittor lorem ipsum dolor sit <br>
amet, consecteur adipiscing elit. Lorem ipsum dolor sir amet nullam consequat feugiat dolore <br>
tempus.
</p>
</article>
</section>null
有什么办法可以改变吗？我希望你能理解我想要得到什么。另外，如果代码是错误的，请不要太在意它，我对这个东西还是很新的：d
共有1个答案
孟韬
我认为您可能需要改变您的布局，在左侧使用一个DIV，在右侧使用两个DIV，如下所示
null
.main {
text-align: center;
padding: 40px;
margin-top: -10px;
border-bottom:1px solid #DDDDDD;
}
.main2 {
background-color: white;
}
body {
background-color: rgb(243, 243, 243);
margin:0;
}
.container {
width:100%;
padding:20px;
}
.leftbox {
width:68%;
float:left;
background:#FFFFFF;
}
.image1 {
padding:0px;
background-image:url("https://i.stack.imgur.com/nhPHk.jpg");
height:160px;"
}
.image2 {
padding:0px;
background-image:url("https://i.stack.imgur.com/Vqklg.jpg");
height:50px;
}
.leftboxcontent {
padding:20px;
}
.middlespace {
width:3%;
float:left;
}
.rightbox {
width:25%;
float:left;
}
.rightboxcontent1 {
background-color:#FFFFFF;
width:100%;
}
.rightboxcontent1a {
padding:20px;
}
.rightboxcontent2 {
background-color:#FFFFFF;
width:100%;
}
.rightboxcontent2a {
padding:20px;
} <title>Blog</title>
<body>
<div class="main2">
<h1 class="main">
<strong>Dopetrope</strong>
</h1>
</div>
<div class=container>
<div class=leftbox>
<div class=image1> </div>
<div class=leftboxcontent>
<h1>Right sidebar</h1>
<h3>Lorem ipsum dolor sit amet feugiat</h3>
<h4>Lorem ipsum dolor sit amet feugiat</h4>
<h4>Lorem ipsum dolor sit amet feugiat</h4>
<h4>Lorem ipsum dolor sit amet feugiat</h4>
<h4>Lorem ipsum dolor sit amet feugiat</h4>
<h4>Lorem ipsum dolor sit amet feugiat</h4>
<h4>Lorem ipsum dolor sit amet feugiat</h4>
<h4>Lorem ipsum dolor sit amet feugiat</h4>
<h4>Lorem ipsum dolor sit amet feugiat</h4>
</div>
<div> </div>
</div>
<div class=middlespace> </div>
<div class=rightbox>
<div>
<div class=image2> </div>
<div class=rightboxcontent1>
<div class=rightboxcontent1a>
TESTTEST<BR>TESTTEST<BR>
TESTTEST<BR>TESTTEST<BR>
TESTTEST<BR>TESTTEST<BR>
TESTTEST<BR>TESTTEST<BR>
TESTTEST<BR>TESTTEST<BR>
TESTTEST<BR>TESTTEST<BR>
</div>
</div>
</div>
<br><br>
<div>
<div class=rightboxcontent2>
<div class=rightboxcontent2a>
TESTTEST2<BR>TESTTEST2<BR>
TESTTEST2<BR>TESTTEST2<BR>
</div>
</div>
</div>
</div>
</div>
</body>
类似资料：
-
所以，我试图做到： 我试着在状态栏后面使用UIView，并将颜色设置为橙色，但运行时，UIView显示在状态栏的正下方，因此仍然是白色 我在互联网上尝试了很多解决方案，但都不管用。是的，它可以工作，但当我移动到另一个视图控制器并再次返回时，颜色消失了。我该怎么办？我用的是斯威夫特
-
在超文本标记语言中，我什么时候使用颜色，背景颜色和背景标签有什么区别？ 有什么区别？
-
问题内容： 如果选择了该面板（单击该面板），则该面板的颜色为蓝色。另外，我在该面板上添加了一个小标志（图像），它表示所选面板之前已被选中。 因此，如果用户看到例如10个面板，其中有4个带有这个小标记，则他知道自己之前已经单击了这些面板。到目前为止，这项工作还不错。现在的问题是我无法显示小标志并使面板同时变为蓝色。 我使用css将面板设置为蓝色，使用设置背景图像。但是背景色似乎在图像上方，因此您看不
-
我想知道这一点，经过一点挖掘，找到了这个资源，链接在这个答案中。 该资源指出： 背景与背景色 比较18个色板在页面上呈现100次为小矩形，一次带有背景，一次带有背景颜色。 现在，我可以想象要快得多，因为资源也认为： 我认为当浏览器看到
-
问题内容： 如何使用JavaScript 获取任何元素（例如）的背景颜色？我努力了： 问题答案： 与所有包含连字符的css属性一样，它们在JS中的对应名称是删除连字符并使用以下字母大写：
-
我有模型 如何在左侧设置logo，在右侧设置导航菜单栏，背景使用位置为HTML图像（注意：不是CSS背景图像）