Question

我在设计一个页面时是CSS的新手 CSS

＆＃13;

  
     body {width:100%;height:920px;margin:0;list-style:none;padding:0;}
    .side{background-color:#9966FF; width:20%;height:920px;float:left;}
    .main{background-color:#CCFFFF; width:80%;height:920px;}

＆＃13;

    <body>
    <div class="side">Its side bar</div>
    <div class="main">ites center bar</div>
    </body>

＆＃13;

但是它在主要课程之后给了我一些空白，所以我的理解是，如果我给予身体100％它会将该空间分成20％和80％in .side和.main class请纠正我？< / p>

Answer 1

实际上，float: left上的div.side可以使div.main的身体宽度100％可用。这就是浮动的工作原理。所以，只需删除width: 80%，然后将其设为margin-left: 20%;即可。

为了更好地了解正在发生的事情，请查看以下小提琴：https://jsfiddle.net/ex6w7tnz/1/

（已移除div.main上的宽度，但未添加左边距。）

因此，浮动div.side不会影响div.main的宽度，只会影响div.side右侧内容的位置。这被称为浮动:)所以当你为div.main分配80％的宽度时，你假设的“空白”就是它正好是身体100％的剩余20％宽度div.main所做的不使用。

Answer 2

在float:left班级

上添加.main

body {width:100%;height:920px;margin:0;list-style:none;padding:0;}
.side{background-color:#9966FF; width:20%;height:920px;float:left;}
.main{background-color:#CCFFFF; width:80%;height:920px;float:left;}

Answer 3

这是因为您将float:left提供给.side，而不是.main div。因此，从.main 80％开始，20％将在div中。

如果我给.main div 30％，那么它只会显示10％。其他10％将被克隆。

＆＃13;

body {width:100%;height:920px;margin:0;list-style:none;padding:0;}
    .side{background-color:#9966FF; width:20%;height:920px;float:left;}
    .main{background-color:#CCFFFF; width:30%;height:920px;}

＆＃13;

<body>
    <div class="side">Its side bar</div>
    <div class="main">ites center bar</div>
    </body>

＆＃13;

同样地，如果我设置20％，那么它没有显示任何内容，文字在下面。检查

＆＃13;

body {width:100%;height:920px;margin:0;list-style:none;padding:0;}
    .side{background-color:#9966FF; width:20%;height:920px;float:left;}
    .main{background-color:#CCFFFF; width:20%;height:920px;}

＆＃13;

<body>
    <div class="side">Its side bar</div>
    <div class="main">ites center bar</div>
    </body>

＆＃13;

要填充整个身体，您需要将float:left提供给.main div。所以，它并排显示。

＆＃13;

body {width:100%;height:920px;margin:0;list-style:none;padding:0;}
    .side{background-color:#9966FF; width:20%;height:920px;float:left;}
    .main{background-color:#CCFFFF; width:80%;height:920px; float:left;}

＆＃13;

<body>
    <div class="side">Its side bar</div>
    <div class="main">ites center bar</div>
    </body>

＆＃13;

希望它有所帮助。

Answer 4

这就是你要做的事情，你是在正确的轨道上。有多种方法可以用HTML和CSS激活相同的结果。

.parent {
  display: flex;
  height:920px
}
.parent > div {
  display: inline-block;
  border: none;
}

.side {
  width: 20%;
  background-color:#9966FF;
}

.main {
  background-color:#CCFFFF;
  width: 80%;
}

<div class="parent">
    <div class="side">text</div>
    <div class="main">text</div>
</div>

Answer 5

浮动清算问题。这是另一种选择：https://fiddle.jshell.net/ts2trhpf/ 您可以使用display: inline-block

使用百分比的空白问题

5 个答案: