为什么混合内容的单元格不是顶部对齐? [英] Why cell with mixed content is not top aligned?

查看:69
本文介绍了为什么混合内容的单元格不是顶部对齐?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

在最近的问题(为什么只有部分单元格是顶部对齐的?)我问过类似的问题。



当我将其解决方案应用到我的网站时...我还有另一个问题:

 < html> 
< head>
< style>
table.t_group {
border:2px solid black;
margin:0 auto 0 auto;
}

table.t_group> tbody> tr> td,
table.t_group> tbody> tr> td> img,
table.t_group> tbody> tr> td> a {
vertical-align:top;
}
< / style>
< / head>
< body>
< table class =t_groupstyle =width:500px>
< tbody>
< td>
< img height =24widht =24/>第一个单元
< / td>
< td>
< a>< img height =24widht =24/>< / a>
< a> HREF_text1< / a> (正规文字,< a> HREF_text2< / a>)
< / td>
< td>
最后一个单元格
< / td>
< / tr>
< / tbody>
< / table>
< body>
< / html>

中间单元格包含Regular文本,它仍然与底部对齐。



为什么?如何解决?



还请推荐在这里阅读更多的事情。



我看到的解决方案:


$ b p>

  table img {
vertical-align:top;
}

会工作,但是为什么?不明白如何



表img与我的table.t_group> tbody> tr> td> img不同

解决方案

在无暇阅读的帮助下 https:/ /css-tricks.com/child-and-sibling-selectors/ 我遇到了问题。



我需要的是添加另一个内部阶段 :



table.t_group> tbody> tr> td> a> img





谢谢大家!


In the recent question (Why only part of cell is top aligned?) I asked similar question.

When I applied its solution to my web site... I still have another problem:

<html>
<head>
    <style>
        table.t_group {
            border: 2px solid black;
            margin: 0 auto 0 auto;
        }

        table.t_group > tbody > tr > td,
        table.t_group > tbody > tr > td > img,
        table.t_group > tbody > tr > td > a {
            vertical-align: top;
        }
    </style>
</head> 
<body>
    <table class="t_group" style="width:500px">
        <tbody>
            <tr>
                <td>
                    <img height="24" widht="24"/> First cell
                </td>
                <td>
                    <a><img height="24" widht="24"/></a> 
                    <a>HREF_text1</a> (regular text, <a>HREF_text2</a>)
                </td>
                <td>
                    Last cell
                </td>
            </tr>
        </tbody>
    </table>
<body>
</html>

The middle cell contains "Regular" text which is still aligned to the bottom.

Why? How To fix?

P.S. Please also recommend where to read more on this matter. I fell damn asking these type of questions.

EDITED:

I see that solution to do:

table img{
  vertical-align:top;
}

would work,... but why? Don't understand how

table img is different from my table.t_group > tbody > tr > td > img

解决方案

With help of nevermind reading https://css-tricks.com/child-and-sibling-selectors/ I got the problem.

What I needed is to add another 'internal stage':

table.t_group > tbody > tr > td > a > img

Or apply just "table img".

Thanks all!

这篇关于为什么混合内容的单元格不是顶部对齐?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆