三列中间列自适应问题CSS 20

这是个自适应的模板,下CSS代码主要看这个,.narrow-sidebar.two-sidebars意思是有两个边栏的CSS设置#sidebar-1#sidebar-2分... 这是个自适应的模板,下CSS代码主要看这个,.narrow-sidebar.two-sidebars 意思是有两个边栏的CSS设置

#sidebar-1 #sidebar-2分别是左右两栏
目的,模板是左右两栏都为16REM,我要求左栏为10REM,右栏为25REM,照样是自适应
CSS代码:
/* Defining breakpoints. We make sure the content width doesn't get > 720px */
@media screen and (min-width: 48.125em) {
/* ~770px */
.narrow-sidebar.one-sidebar-left #main, .narrow-sidebar.two-sidebars #main {
padding: 0 0 0 20rem;
}
.narrow-sidebar.one-sidebar-left #primary, .narrow-sidebar.two-sidebars #primary {
padding: 0;
margin: 0;
float: left;
margin-right: -100%;
width: 100%;
}
.narrow-sidebar.one-sidebar-left #secondary, .narrow-sidebar.two-sidebars #secondary {
float: left;
width: 20rem;
margin-left: -20rem;
-webkit-box-shadow: rgba(0, 0, 0, 0.1) 0 0 0 0.1rem;
-moz-box-shadow: rgba(0, 0, 0, 0.1) 0 0 0 0.1rem;
box-shadow: rgba(0, 0, 0, 0.1) 0 0 0 0.1rem;
}
.narrow-sidebar.one-sidebar-left #sidebar-1,
.narrow-sidebar.one-sidebar-left #sidebar-2, .narrow-sidebar.two-sidebars #sidebar-1,
.narrow-sidebar.two-sidebars #sidebar-2 {
float: left;
width: 16rem;
}
.narrow-sidebar.one-sidebar-left #sidebar-2, .narrow-sidebar.two-sidebars #sidebar-2 {
padding-top: 0;
}
.narrow-sidebar.one-sidebar-right #main {
padding: 0 20rem 0 0;
}
.narrow-sidebar.one-sidebar-right #primary {
padding: 0;
margin: 0;
float: left;
margin-right: -100%;
width: 100%;
}
.narrow-sidebar.one-sidebar-right #secondary {
float: right;
width: 20rem;
margin-right: -20rem;
-webkit-box-shadow: rgba(0, 0, 0, 0.1) 0 0 0 0.1rem;
-moz-box-shadow: rgba(0, 0, 0, 0.1) 0 0 0 0.1rem;
box-shadow: rgba(0, 0, 0, 0.1) 0 0 0 0.1rem;
border-bottom-left-radius: 0.5rem;
}
.narrow-sidebar.one-sidebar-right #sidebar-1 {
float: right;
width: 16rem;
border-bottom-left-radius: 0.5rem;
}
.narrow-sidebar.one-sidebar-left #sidebar-1, .narrow-sidebar.two-sidebars #sidebar-2 {
border-bottom-right-radius: 0.5rem;
}

---------------------------------------

HTML为:

<body class="home blog logged-in admin-bar no-customize-support two-sidebars narrow-sidebar large-font-sidebar large-font-content">

<div id="main" class="site-main"><div id="primary" class="content-area">
<div id="content" class="site-content" role="main">
中间文章区
</div>
</div>
<div id="secondary" class="widget-area">
<div id="sidebar-1" class="sidebar" role="complementary">
左栏内容</div>
<div id="sidebar-2" class="sidebar" role="complementary">
右栏内容
</div>
</div>
</div>
</body> 展开

 我来答

1个回答

#热议# 应届生在签三方时要注意什么？

百度网友a19d193
2013-04-12 · TA获得超过3446个赞

知道大有可为答主

回答量：1464

采纳率：100%

帮助的人：1435万

我也去答题访问个人页

关注

展开全部

<!--你看www.941172.com的首页-->

这个就是你要的效果。实际上不是左中右三栏，而是左右，然后右里面再分左右。有问题再追问

已赞过 已踩过<

评论收起

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

三列中间列自适应问题CSS 20

为你推荐：