我希望实现一个三栏布局,左右两侧宽度固定,中间的宽度自适应,但是现在右侧栏跟中间栏的底部对齐了,正常的文档流不是应该顶端对齐吗?,不知道为什么会出现这种情况。
html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="css/style.css"> <title>task 3</title>
</head>
<body>
<div class="content"> <div class="left"> <img src="images/logo.jpg"> <span>糖果之家</span> </div> <div class="middle"> 这次,朴槿惠和韩国政府“摊上事了”!“总统朴槿惠正在深思熟虑如何平息亲信幕后干政争议。”韩联社10月27日报道称。随着媒体的曝光和民众的质疑不断增加,韩国总统朴槿惠亲信“干政”事件继续发酵,引发了全世界的关注,朴槿惠也面临上任以来最大的政治危机。 </div> <div class="right"> <img src="images/1.jpg"> <img src="images/1.jpg"> <img src="images/1.jpg"> <img src="images/1.jpg"> </div> </div>
</body>
</html>
css代码
*{
margin:0; padding: 0;
}
.content{
padding: 20px; overflow: hidden; background-color: #eee; border: 1px solid #999;
}
.left{
float: left; width: 200px; padding: 20px; box-sizing: border-box; border: 1px solid #999;
}
.left img{
float: left;
}
img{
width: 80px; height: 80px; border: 1px solid #999;
}
.middle{
margin-left:220px; margin-right: 140px; padding: 20px; border: 1px solid #999;
}
.right{
float: right; width: 120px; box-sizing: border-box; border: 1px solid #999;
}
.right img{
display: block; margin: 20px;
}
付费偷看金额在0.1-10元之间
三栏布局顺序反了,你的这种 css 布局,left right middle 在 html 中的顺序应该是:
所有把 right 放在 middle 前面就可以了。
一周热门 更多>