Html 为什么CSS左浮动可以'；不要把两个div放在同一条线上？_Html_Css

Html 为什么CSS左浮动可以'；不要把两个div放在同一条线上？

html css

Html 为什么CSS左浮动可以'；不要把两个div放在同一条线上？,html,css,Html,Css,我想用CSS在同一行上做两个div 正文{ 边际：0px；填充：0px； } div{ 边框：1px纯黑；字体大小：30px； } #包装纸{ 宽度：900px；保证金：0px自动； } #标题{ 宽度：100%；高度：100px；背景：红色； } #主要{ 宽度：100%；高度：100px；背景：蓝色； } #左上角{ 宽度：50%；高度：100px；背景：蓝色；浮动：左； } #登录权{ 宽度：50%；高度：100px；背景：黄色；浮动：左； } #页脚{ 宽度

我想用CSS在同一行上做两个div

正文{
边际：0px；
填充：0px；
}
div{
边框：1px纯黑；
字体大小：30px；
}
#包装纸{
宽度：900px；
保证金：0px自动；
}
#标题{
宽度：100%；
高度：100px；
背景：红色；
}
#主要{
宽度：100%；
高度：100px；
背景：蓝色；
}
#左上角{
宽度：50%；
高度：100px；
背景：蓝色；
浮动：左；
}
#登录权{
宽度：50%；
高度：100px；
背景：黄色；
浮动：左；
}
#页脚{
宽度：100%；
高度：50px；
背景：白色；
}


这是最上面的
左上角
登录权
这是页脚

您使用border，因此div为50%+2px（要解决此问题，请使用

框大小：border-box；

）

左侧的登录宽度为50%（+2px），所有的线条都是蓝色的，这是因为#main有一个蓝色的背景

您使用border，因此div为50%+2px（要解决此问题，请使用

框大小：border-box；

）

左侧的登录宽度为50%（+2px），所有的线条都是蓝色的，这是因为#main有一个蓝色的背景

问题在于边境。它使用额外的2像素

<html>
<header>
<style type="text/css">
body{
      margin:0px;
      padding:0px;}
div{
    border:1px solid black;
    font-size:30px;
    box-sizing:border-box;}
#wrapper{
    width:900px;
    margin:0px auto;}
#header{
    width:100%;
    height:100px;
    background:red;}
#main{
    width:100%;
    height:100px;
    background:blue;}
#login_left{
    width:50%;
    height:100px;
    background:blue;
    float:left;
    }   
#login_right{
    width:50%;
    height:100px;
    background:yellow;
    float:left;
    } 
#footer{
    width:100%;
    height:50px;
    background:white;
    display:table;
    } 
</style>
</header>

<body>
<div id="wrapper">
    <div id="header">this is the top
    </div>
    <div id="main">
        <div id="login_left">login_left
        </div>
        <div id="login_right" >login_right
        </div>       
    </div>
    <div id="footer">this is the footer
    </div>
</div>
</body>
</html>

问题在于边境。它正在使用额外的2像素。


<html>
<header>
<style type="text/css">
body{
      margin:0px;
      padding:0px;}
div{
    border:1px solid black;
    font-size:30px;
    box-sizing:border-box;}
#wrapper{
    width:900px;
    margin:0px auto;}
#header{
    width:100%;
    height:100px;
    background:red;}
#main{
    width:100%;
    height:100px;
    background:blue;}
#login_left{
    width:50%;
    height:100px;
    background:blue;
    float:left;
    }   
#login_right{
    width:50%;
    height:100px;
    background:yellow;
    float:left;
    } 
#footer{
    width:100%;
    height:50px;
    background:white;
    display:table;
    } 
</style>
</header>

<body>
<div id="wrapper">
    <div id="header">this is the top
    </div>
    <div id="main">
        <div id="login_left">login_left
        </div>
        <div id="login_right" >login_right
        </div>       
    </div>
    <div id="footer">this is the footer
    </div>
</div>
</body>
</html>

身体{
边际：0px；
填充：0px；}
div{
边框：1px纯黑；
字体大小：30px；
框大小：边框框；}
#包装纸{
宽度：900px；
页边距：0px自动；}
#标题{
宽度：100%；
高度：100px；
背景：红色；}
#主要{
宽度：100%；
高度：100px；
背景：蓝色；}
#左上角{
宽度：50%；
高度：100px；
背景：蓝色；
浮动：左；
}   
#登录权{
宽度：50%；
高度：100px；
背景：黄色；
浮动：左；
} 
#页脚{
宽度：100%；
高度：50px；
背景：白色；
显示：表格；
} 
这是最上面的
左上角
登录权
这是页脚

代码的附加内容：

框大小：边框框到div选择器。将其视为内部边界，而不是外部边界。它不会使用此属性向元素添加任何总体大小。当您使用50%和50%时，向所有边添加1px意味着您超过100%，使您的div堆叠
显示：表格到页脚，使其显示在表格布局中，并尊重您的边框大小以匹配其他表格。

身体{
边际：0px；
填充：0px；}
div{
边框：1px纯黑；
字体大小：30px；
框大小：边框框；}
#包装纸{
宽度：900px；
页边距：0px自动；}
#标题{
宽度：100%；
高度：100px；
背景：红色；}
#主要{
宽度：100%；
高度：100px；
背景：蓝色；}
#左上角{
宽度：50%；
高度：100px；
背景：蓝色；
浮动：左；
}   
#登录权{
宽度：50%；
高度：100px；
背景：黄色；
浮动：左；
} 
#页脚{
宽度：100%；
高度：50px；
背景：白色；
显示：表格；
} 
这是最上面的
左上角
登录权
这是页脚

代码的附加内容：
框大小：边框框到div选择器。将其视为内部边界，而不是外部边界。它不会使用此属性向元素添加任何总体大小。当您使用50%和50%时，向所有边添加1px意味着您超过100%，使您的div堆叠
显示：表格，使其显示在表格布局中，并根据您的边框大小匹配其他表格。
删除边框可使其正常工作：

如果您想保留它们，请遵循其他答案：
div{
   box-sizing:border-box; //ADD THIS
   border:1px solid black;
   font-size:30px;
}

删除边框可以使其正常工作：

如果您想保留它们，请遵循其他答案：
div{
   box-sizing:border-box; //ADD THIS
   border:1px solid black;
   font-size:30px;
}

您正在为已达到50%的内容添加边框。总宽度将超过50%，这不适合一个100%的行。您确定这是登录左分区而不是#主分区吗？你能给我们看看你的html吗？框大小：边框框；另外，如果您不想使用flex或border box，flexbox是一个很好的解决方案。尝试将边框添加到主结构div中的div中。您正在将边框添加到已为50%的部分。总宽度将超过50%，这不适合一个100%的行。您确定这是登录左分区而不是#主分区吗？你能给我们看看你的html吗？框大小：边框框；另外，如果您不想使用flex或border box，flexbox是一个很好的解决方案。尝试将边框添加到主结构div中的div中。你能解释一下为什么这会回答OP吗？当然，只是在新元素中添加了解释。你能解释一下为什么这会回答OP吗？当然，只是在新元素中添加了解释