css,使两个在同一行内的display:inline-block的div顶部对齐。

<body><divclass="zuo"></div><divclass="you"></div><style>.zuo{display:inline-block;wi... <body >
<div class ="zuo"></div><div class ="you"></div>
<style>
.zuo{display:inline-block;width:200px;height:300px;background:#f00;}
.you{display:inline-block;width:200px;height:500px;background:#666;}
</style>
</body>

如上面代码,如何使红色部分与灰色部分顶部对齐?
展开
 我来答
黑马程序员
2017-06-11 · 改变中国IT教育,我们正在行动
黑马程序员
黑马程序员为大学毕业后,有理想、有梦想,想从事IT行业的年轻人改变自己的命运。黑马程序员成就IT黑马
向TA提问
展开全部

一、首先是HTML布局:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>两个行内快元素顶部对齐</title>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>

二、未添加CSS样式的在浏览器效果浏览:

三、添加CSS样式的:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>两个行内快元素顶部对齐</title>
<style type="text/css">
div {
display: inline-block;
vertical-align: top;
}
.box1 {
width: 200px;
height: 200px;
background-color: orange;
}
.box2 {
width: 200px;
height: 100px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>

开发工具里面的截图:

四、最终在浏览器里面的效果:

大雅新科技有限公司
2024-11-19 广告
这方面更多更全面的信息其实可以找下大雅新。深圳市大雅新科技有限公司从事KVM延长器,DVI延长器,USB延长器,键盘鼠标延长器,双绞线视频传输器,VGA视频双绞线传输器,VGA延长器,VGA视频延长器,DVI KVM 切换器等,优质供应商,... 点击进入详情页
本回答由大雅新科技有限公司提供
休闲娱乐chl
高粉答主

2020-08-07 · 每个回答都超有意思的
知道大有可为答主
回答量:5627
采纳率:100%
帮助的人:148万
展开全部

根据项目需求,有时两个div要显示在同一行。要实现这个可以使用浮动或者flex布局,但两者都有一定的缺点。而使用行内块却可以完美解决这一问题。但有时却不能显示在同一水平线上。应该如何解决?

其实非常简单,只要在使用行内块的div上加上这样一句代码,问题就迎刃而解;

<style>
vertical-align:top;
</style>

扩展资料

CSS可以将样式定义在HTML元素的style属性中,也可以将其定义在HTML文档的header部分,也可以将样式声明在一个专门的CSS文件中,以供HTML页面引用。总之,CSS样式表可以将所有的样式声明统一存放,进行统一管理。

另外,可以将相同样式的元素进行归类,使用同一个样式进行定义,也可以将某个样式应用到所有同名的HTML标签中,也可以将一个CSS样式指定到某个页面元素中。如果要修改样式,我们只需要在样式列表中找到相应的样式声明进行修改。

本回答被网友采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
朴赡豆英叡
2019-04-11 · TA获得超过3777个赞
知道大有可为答主
回答量:3150
采纳率:28%
帮助的人:239万
展开全部

一、首先是HTML布局:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>两个行内快元素顶部对齐</title>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
二、未添加CSS样式的在浏览器效果浏览:
三、添加CSS样式的:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>两个行内快元素顶部对齐</title>
<style type="text/css">
div {
display: inline-block;
vertical-align: top;
}
.box1 {
width: 200px;
height: 200px;
background-color: orange;
}
.box2 {
width: 200px;
height: 100px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
开发工具里面的截图:
四、最终在浏览器里面的效果:

已赞过 已踩过<
你对这个回答的评价是?
评论 收起
百度网友c3c0c01
2011-04-17
知道答主
回答量:23
采纳率:0%
帮助的人:6.5万
展开全部
这是因为你设置display:inline-block的原因 其实你完全可以用浮动来布局
.zuo{float:left;width:200px;height:300px;background:#f00;}
.you{float:left;width:200px;height:500px;background:#666;}
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
jonggers
2011-04-17 · TA获得超过846个赞
知道小有建树答主
回答量:497
采纳率:0%
帮助的人:544万
展开全部
两个都加上:vertical-align:top;
本回答被提问者采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 更多回答(6)
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式