ask2

有关三栏布局问题，div没有对齐 财富值40

2016-10-30 14:06发布

站内问答 /
1285 2 4

我希望实现一个三栏布局，左右两侧宽度固定，中间的宽度自适应，但是现在右侧栏跟中间栏的底部对齐了，正常的文档流不是应该顶端对齐吗？，不知道为什么会出现这种情况。

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;

}

发送
2条回答
ve~rain - 这个人很懒，什么都没留下
1楼 · 2016-10-30 14:37.采纳回答

三栏布局顺序反了，你的这种 css 布局，left right middle 在 html 中的顺序应该是：

mishen - whatsns产品经理
2楼-- · 2016-10-30 14:43

所有把 right 放在 middle 前面就可以了。

一周热门 更多>