DIV 布局 左中右
<divclass="header"><divclass="左">左</div><divclass="中"><p>中</p></div><divclass="右">右</...
<div class="header">
<div class="左">左</div>
<div class="中"><p>中</p></div>
<div class="右">右</div>
</div>
求解： 左,右都是200px， 中最小300px，最大值是浏览器屏的值减去左和右共400px
P标签文字上下居中
怎么写？ 有代码最好
上面是屏幕缩小 但是内容没有被遮挡的情况 展开
<div class="左">左</div>
<div class="中"><p>中</p></div>
<div class="右">右</div>
</div>
求解： 左,右都是200px， 中最小300px，最大值是浏览器屏的值减去左和右共400px
P标签文字上下居中
怎么写？ 有代码最好
上面是屏幕缩小 但是内容没有被遮挡的情况 展开
5个回答
展开全部
<style type="text/css">
body{ margin:0; padding:0;}
.Header{ height:100px; background:red;}
.Left{ float:left; width:200px; height:300px; background:yellow;}
.Right{ float:right; width:200px; height:300px; background:green;}
.Center{ margin:0 200px; height:300px; background:blue;}
.Content{ min-width:700px;_width:expression((document.documentElement.clientWidth||document.body.clientWidth)>700?"700px":"");}
</style>
</head>
<body>
<div class="Header"></div>
<div class="Content">
<div class="Right">右</div>
<div class="Left">左</div>
<div class="Center">中</div>
</div>
</body>
body{ margin:0; padding:0;}
.Header{ height:100px; background:red;}
.Left{ float:left; width:200px; height:300px; background:yellow;}
.Right{ float:right; width:200px; height:300px; background:green;}
.Center{ margin:0 200px; height:300px; background:blue;}
.Content{ min-width:700px;_width:expression((document.documentElement.clientWidth||document.body.clientWidth)>700?"700px":"");}
</style>
</head>
<body>
<div class="Header"></div>
<div class="Content">
<div class="Right">右</div>
<div class="Left">左</div>
<div class="Center">中</div>
</div>
</body>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
楼下的css里还用表达式，有那么麻烦吗？css表达式影响页面性能，能不用最好。
<style type="text/css">
.header {
position:relative;
width:100%;
height:200px;
}
.left {
position: absolute;
left:0;
top: 0;
width: 200px;
height: 200px;
background-color: #F00;
}
.right {
position: absolute;
right:0;
top: 0;
width: 200px;
height: 200px;
background-color: #00F;
}
.content {
margin: 0 200px;
min-width:300px;
height:200px;
background-color: #0F0;
}
</style>
<div class="header">
<div class="left"></div>
<div class="content"></div>
<div class="right"></div>
</div>
左右绝对定位,中间的设置左右边距为左右两个div的宽度就行了，中间的不能设置定位，不然会自适应内容宽度的，块级元素是自适应父容器宽度的，但是定位和浮动后的块级元素就自适应内容宽度了
<style type="text/css">
.header {
position:relative;
width:100%;
height:200px;
}
.left {
position: absolute;
left:0;
top: 0;
width: 200px;
height: 200px;
background-color: #F00;
}
.right {
position: absolute;
right:0;
top: 0;
width: 200px;
height: 200px;
background-color: #00F;
}
.content {
margin: 0 200px;
min-width:300px;
height:200px;
background-color: #0F0;
}
</style>
<div class="header">
<div class="left"></div>
<div class="content"></div>
<div class="right"></div>
</div>
左右绝对定位,中间的设置左右边距为左右两个div的宽度就行了，中间的不能设置定位，不然会自适应内容宽度的，块级元素是自适应父容器宽度的，但是定位和浮动后的块级元素就自适应内容宽度了
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<style>
.header{min-width: 710px; width:expression(document.body.clientWidth < 710? "710px": "auto" );}
.left{ background:#FF99CC; float:left}
.right{ background:#3399FF; float:right}
.left,.right{ width:200px; overflow:hidden; display:inline}
.mid{ background:#33FFFF;margin:0 205px !important; margin:0 202px; min-width: 300px; width:expression(document.body.clientWidth < 300? "300px": "auto" );}
.clear{ clear:both; height:1px; overflow:hidden;}
</style>
<div class="header">
<div class="left">左</div>
<div class="right">右</div>
<div class="mid"><p>中</p></div>
<div class="clear"></div>
</div>
如果想不换行的话给header定一个属性（最小宽度）；中间框的话加上hack排除IE的3像素BUG，左右框分别左浮动和右浮动，浮动元素加上清除浮动样式，这里是.clear
希望对你有帮助
-------------------------------------------------------------------------------
你会css吗？背景颜色去掉，加上自己要的div框的内容，不就是那个效果吗？
（左边是邮箱和图片的混排，中间是文字你只要在中间的那个div里面加入text-align:center;color:#f00,右边加入搜索的框和nav不就可以了，无数div框架去嵌套，就OK了啊）
.header{min-width: 710px; width:expression(document.body.clientWidth < 710? "710px": "auto" );}
.left{ background:#FF99CC; float:left}
.right{ background:#3399FF; float:right}
.left,.right{ width:200px; overflow:hidden; display:inline}
.mid{ background:#33FFFF;margin:0 205px !important; margin:0 202px; min-width: 300px; width:expression(document.body.clientWidth < 300? "300px": "auto" );}
.clear{ clear:both; height:1px; overflow:hidden;}
</style>
<div class="header">
<div class="left">左</div>
<div class="right">右</div>
<div class="mid"><p>中</p></div>
<div class="clear"></div>
</div>
如果想不换行的话给header定一个属性（最小宽度）；中间框的话加上hack排除IE的3像素BUG，左右框分别左浮动和右浮动，浮动元素加上清除浮动样式，这里是.clear
希望对你有帮助
-------------------------------------------------------------------------------
你会css吗？背景颜色去掉，加上自己要的div框的内容，不就是那个效果吗？
（左边是邮箱和图片的混排，中间是文字你只要在中间的那个div里面加入text-align:center;color:#f00,右边加入搜索的框和nav不就可以了，无数div框架去嵌套，就OK了啊）
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
文字居中一般都是用行高来控制的
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
现在是什么问题， 你想要什么效果？
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（3）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
