下面三列布局的搜索栏，左右两边固定宽度，中间自适应宽度，div+css如何写代码？ 60
1个回答
展开全部
左右固定宽度，用position属性， 中间自适应用margin属性 上右下左。上下为0 左边的距离等于左div的宽度，右边的距离等于右div的宽度。
<html>
<head>
<meta charset="UTF-8"/>
<title></title>
<style type="text/css">
*{margin: 0;padding: 0;}
#a{
width: 200px;
height: 800px;
background: red;
position: absolute;
top: 0;
left: 0;
}
#b{
height: 800px;
background: #ccf;
margin: 0 auto;
}
#c{
width: 300px;
height: 800px;
background: yellow;
position: absolute;
top: 0;
right: 0;
}
</style>
</head>
<body>
<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
</body>
</html>
<html>
<head>
<meta charset="UTF-8"/>
<title></title>
<style type="text/css">
*{margin: 0;padding: 0;}
#a{
width: 200px;
height: 800px;
background: red;
position: absolute;
top: 0;
left: 0;
}
#b{
height: 800px;
background: #ccf;
margin: 0 auto;
}
#c{
width: 300px;
height: 800px;
background: yellow;
position: absolute;
top: 0;
right: 0;
}
</style>
</head>
<body>
<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
</body>
</html>
追问
中间椭圆搜索框 宽度自适应是如何实现的呢？
追答
这就是一个三列布局，中间自适应，边框属性border-radius:50%;
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
