求解关于display:table的问题

先放出代码

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>匆匆那年</title>
    <link rel="stylesheet" href="css.css">
  </head>

  <body>


<div class="main">
<div class="table">
<div class="tablerow">
 <div class="table-cell">
    <img id="picture" src="匆匆那年.jpg">
 </div>
 <div class="tablecell">
        「《匆匆那年》是北京小马奔腾影业2014年出品的校园爱情片,改编自九夜茴
 同名小说。该影片由张一白执导,彭于晏、倪妮、郑恺、魏晨、张子萱、陈赫
 等人主演。该影片讲述了阳光少年陈寻、痴心女孩方茴、温情暖男乔燃、纯情
 备胎赵烨、豪放女神林嘉茉这群死党跨越十五年的青春、记忆与友情的故事。」
       </div>
 </div>
 </div>
</div>


</html>

</head>

.main{width:480px}
.table{display:table;border-spacing:5px}
.tablerow{display:table-row}
.tablecell{display:table-cell;}
#picture{width:230px;height:180px}

那么问题来了,如下图,为什么那段字是在下面而不是和图片水平并列呢?如果要并列该怎么做呢?求大神
图片描述

阅读 4.6k
2 个回答

.tablecell 增加一个 vertical-align 样式,topmiddle 还是 bottom 就看你的需求了。

.tablecell 添加 vertical-align: top;.

这个问题的出现原因有可能是因为默认属性 vertical-align: baseline; 有关,因为上下文的关系,导致其基线对齐的标准也不一样,具体可以看下文档 http://www.w3.org/TR/CSS2/visudet.html#leading

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题