CSS显示三列内容

我正在尝试使用

为每一列获取三列输出

现在，我左边的div，即使是中间的那一个也排列得很好，但是当我试着把它放在右边的时候，它只是剪短了

CSS

/*左分区*/
#左侧边栏，#右侧边栏{
宽度：15%；
高度：700px；
浮动：左；
左侧填充：15px；
填充顶部：20px；
}
/*中段*/
#中等含量{
宽度：75%；
左侧填充：30px；
填充顶部：20px；
}
/*右分区*/
#右侧边栏{
浮动：对；
}

如果将值更改为100%，会发生什么情况？。现在，75%、15%和15%加起来是105%。

这是因为根据CSS，元素的大小是其宽度、边框和填充的总和，因此-您的内容+填充超过了100%

为了解决这个问题，只需添加

box-sizing: border-box;

它将重新计算所需的宽度，并将上述内容考虑在内

此外，您可能会考虑将元素浮动到同一个方向，即左边，因为否则框大小的东西可能会被抛出。

---

我在这里举了一个有效的例子：

首先，你的元素加起来总共有105%。 其次，将填充添加到浮动元素中，该元素的宽度以%指定，这不是一个好主意。看

这里有一个解决方案

#左侧边栏，
#右侧边栏，
#中等含量{
浮动：左；
}
#左侧边栏，
#右侧边栏{
宽度：15%；
背景色：红色；
}
#中等含量{
宽度：70%；
背景颜色：蓝色；
}

---

记住使用

clear：两者都有
您的右div应该仅为10%或更少，请在css@AndrewEvt哈哈，在同一篇帖子里又一次算错了：）谢谢你的提示。我编辑了答案，操纵了我的计算。。100%以下。。但问题仍然存在，我不建议使用框大小，我知道所有主流浏览器都支持，但这是一种不好的做法。保罗·爱尔兰（Paul Irish）已经支持了近两年了：从个人经验来看，我不敢苟同，然而，我确实想问你为什么这么想？@arpymastro-我已经更新了我的答案，并提供了一个工作示例。@KyleMit我做了修改，但右边的边栏仍然被剪掉了。。另外，请告诉我在何处以及如何使用clear：both@KyleMit我是否应该使用表格将所有div放置在各个列中？？？？我的左侧边栏包含一个导航面板，就像当我们将鼠标悬停在它上面时，子导航会向左浮动，然后是中间内容，然后是右侧边栏……您永远不应该出于设计目的使用表格。为数据制作表格。你能试着为你的页面制作一个JSFIDLE版本以便我们能看到它吗？