Html 浮动两个等于100%宽度的div标记将第二个div移动到新行_Html_Css

Html 浮动两个等于100%宽度的div标记将第二个div移动到新行

html css

Html 浮动两个等于100%宽度的div标记将第二个div移动到新行,html,css,Html,Css,什么都是新手我有两个div标签，第一个宽度为80%，第二个宽度为20%。80%+20%=100%，但第二个div移动到下一行目标是在不移动到第二条线路的情况下使用整条线路 <!DOCTYPE html> <html> <head> <style> .border { border-style: dotted; } </style> </head> <body> <div class="border

什么都是新手

我有两个div标签，第一个宽度为80%，第二个宽度为20%。80%+20%=100%，但第二个div移动到下一行

目标是在不移动到第二条线路的情况下使用整条线路

<!DOCTYPE html>
<html>
<head>
<style>

.border {
border-style: dotted;
}

</style>
</head>
<body>

<div class="border" style="width: 80%;">thing</div>
<div class="border" style="width: 20%; float: left;">other thing</div>

</body>
</html>


.边界{
边框样式：虚线；
}
事情
其他事情

试试看

东西
其他事情

试试看

东西
其他事情
你需要考虑你的边界与宽度的关系。边框会增加宽度，使宽度值增加。您必须减小宽度大小才能实现这一点

.border{
边框样式：虚线；
}
东西
其他事情

事情
其他事情

事情
其他东西你需要考虑你的边界和宽度。边框会增加宽度，使宽度值增加。您必须减小宽度大小才能实现这一点

.border{
边框样式：虚线；
}
东西
其他事情

事情
其他事情

事情
其他事情
试试这个：
css代码：
.table_formate {
  display:flex;
  width:100%
}
.border {
  border:1px solid #ddd;
}

HTML:

事情
其他事情

试试这个：
css代码：
.table_formate {
  display:flex;
  width:100%
}
.border {
  border:1px solid #ddd;
}

HTML:

事情
其他事情

您必须记住的是，块级元素（如div）始终延伸到页面的左边缘和右边缘。设置宽度时，您设置的是内容的宽度，而不是它所称的宽度。若要执行所需操作，需要浮动或重新定位第一个div，使其不占全宽
还要记住，边框
超出了内容的宽度。你必须记住填充和边距。在几乎所有的图形浏览器中，页边空白都会添加到正文中，不过这并不会影响您的问题
因此，宽度设置为父元素的80%和20%。父元素是主体，所以我们在这里没有问题，但是您有一个边框。该边框使内容的总宽度超出正文2倍；div元件每侧一个px
如果删除边框并浮动第一个div，您将完成所需的操作
或者，您可以将边框保留在中，并使一个或两个div元素稍微变小以容纳边框
在评论中回答您的问题：
div { width: calc(80% - 2px); }

请注意“2px”，因为它是div元素每侧的一个px。在公式中保留空格以使其生效
编辑：刚刚注意到作为边框的“点”的宽度大于1px。您需要在公式中设置负值，以适应边框的宽度。
需要记住的是，块级元素（如div）始终延伸到页面的左边缘和右边缘。设置宽度时，您设置的是内容的宽度，而不是它所称的宽度。若要执行所需操作，需要浮动或重新定位第一个div，使其不占全宽
还要记住，边框
超出了内容的宽度。你必须记住填充和边距。在几乎所有的图形浏览器中，页边空白都会添加到正文中，不过这并不会影响您的问题
因此，宽度设置为父元素的80%和20%。父元素是主体，所以我们在这里没有问题，但是您有一个边框。该边框使内容的总宽度超出正文2倍；div元件每侧一个px
如果删除边框并浮动第一个div，您将完成所需的操作
或者，您可以将边框保留在中，并使一个或两个div元素稍微变小以容纳边框
在评论中回答您的问题：
div { width: calc(80% - 2px); }

请注意“2px”，因为它是div元素每侧的一个px。在公式中保留空格以使其生效
编辑：刚刚注意到作为边框的“点”的宽度大于1px。您需要在公式中设置负值以适应边框的宽度。
您可以使用框大小：边框框在元素宽度计数中保留边框：
请参阅下面的代码片段

.border{
边框样式：虚线；
}
*{框大小：边框框；-webkit框大小：边框框；}
东西
其他事项
您可以使用框大小：边框框在元素宽度计数中保留边框：
请参阅下面的代码片段

.border{
边框样式：虚线；
}
*{框大小：边框框；-webkit框大小：边框框；}
东西
另一件事
您可以将两个div都向左浮动，我想是这样的。但我仍然不知道如何保持虚线边界D：你可以将两个div都向左浮动，我想是的。但我仍然不知道如何保持虚线边框D：有没有办法把边框-1px放进去，这样它就不算了？有没有办法把边框-1px放进去，这样它就不算了？