带有左右列的 CSS 中心页面
发布于2021-10-09 09:38 阅读(74) 评论(0) 点赞(2) 收藏(0)
我将无法将我的主要 #page 放在页面中间，其中有 2 列在此左侧/右侧浮动。我知道如果我先用左列重新排序 HTML，这将很容易工作，尽管我希望 #page 在 HTML 中排在第一位。
HTML：
<div id="page"></div>
<div id="left-column"></div>
<div id="right-column"></div>
我能想到的唯一方法是使用 1px 透明 div 将内容推到中间，尽管这是最后的手段。
解决方案
使用包装器display: table;和孩子一起display: table-cell;
#page 元素必须在中间。您的标记必须反映您网站所需的布局，否则您最终会使用更多 CSS 来使可以非常简单地完成的事情复杂化。
HTML：
<div id="wrapper">
<div id="left-column">left column</div>
<div id="page">page</div>
<div id="right-column">right clomumn</div>
</div>
CSS：
#wrapper
{
width: 100%;
display: table;
}
#right-column {
width: 15%;
height: 500px;
}
#page{
width: 70%;
height: 500px;
}
#left-colum {
width: 15%;
height: 500px;
}
#right-column,
#left-column,
#page
{
display: table-cell;
}
所属网站分类: 技术文章 > 问答
作者：黑洞官方问答小能手
链接：http://www.qianduanheidong.com/blog/article/199008/7ae6cc7f05a774123447/
来源：前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容：(最多支持255个字符)
---无人问津也好，技不如人也罢，你都要试着安静下来，去做自己该做的事，而不是让内心的烦躁、焦虑，坏掉你本来就不多的热情和定力