侧边栏的背景颜色，HTML，CSS

Question

我想问你一些困扰我一段时间的事情。我目前学习 HTML 和 CSS，我们得到了这个作业，我们必须创建一个博客，中间有一篇文章，右边有两个侧边栏，网站的背景颜色应该是灰色。问题是主要文章和两个侧边栏应该有白色背景颜色，所以当我将文章的背景颜色更改为白色时，它会自动控制 75% 的网站，甚至在文章之外。这是截图。

我想做什么 https://f.v1.n0.cdn.getcloudapp.com/items/0k300n0O0J0c1l1B3K2J/blog-1.png

将侧边栏的背景颜色更改为白色时得到的结果 https://ctrlv.sk/WF4e

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

知道如何改变这个吗？我希望你明白我在这里想要达到的目标。如果代码有误，请不要太介意，我对这些东西还是很陌生:D

Answer 1

我认为您可能需要更改布局，在左侧使用一个 DIV，在右侧使用两个 DIV，如下所示

.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>&nbsp;</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>&nbsp;</div>
     </div>


     <div class=middlespace>&nbsp;</div>

     <div class=rightbox>

         <div>
             <div class=image2>&nbsp;</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>

Answer 2

在用内容填充结构之前，先从一个强大的结构开始是个好习惯。如果你有一个好的结构，那么你的调试就会更少。类似于下面的模板。

小费。 display:flex 比 float:left

更灵活

* {
  margin: 0;
  box-sizing: border-box;
}
#header {
  width: 100%;
}
#main {
  float: left;
  width: 70%;
}
#aside {
  float: left;
  width: 30%;
}
#footer {
  clear: both;
  width: 100%;
}
/* for test purpose only */
.test {
  height: 80px;
  border: 1px solid orange;
}

<header id="header" class="test">
</header>
   
<section id="main" class="test">
  <article>
  </article>
</section>
   
<aside id="aside" class="test">
</aside>
   
<footer id="footer" class="test">
</footer>

侧边栏的背景颜色，HTML，CSS

Background color of sidebars, HTML,CSS

html

css

background

colors