Question

该项目旨在创建一个类似于Twitter的微博客网站。我选择将网站命名为Chirper（我多么聪明）。每个帖子由父div，化身div和内容div构成。头像和内容div以内联方式显示，但它们未正确对齐。任何帮助表示赞赏。

HTML：

<div class="chirp">
<div class="chirp_avatar_region">
    <img src="img/avatar/default.png" alt="Avatar" width="64" height="64">
</div>
<div class="chirp_content">
    <p>
        <a href="users.php?uid=15">USER</a>
        <span class="timeStamp">2013-11-22 16:43:59</span>
    </p>
    <p>
        COMMENT
    </p>
    <p>
        <a href="repost.php?cid=24">ReChirp!</a>
    </p>
</div>

div不符合我想要的方式（级别和父级的100％）。

我无法发布图片，因此这里是指向imgur页面的链接：http://imgur.com/Mn9mE5q

相关CSS：

    body {
    font-family: Verdana, Geneva, sans-serif;
    color: #000;
    background-color: #666;
    font-size: 1em;
}

/* Containers */

div {
    margin-top: auto;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10px;

    border-style: solid;
    border-width: 3px;
    border-color: #000;

    padding: 10px;
}

div.pane {
    width: 70%;
    background-color: 0099FF;
}

div.chirp {
    border-width: 1px;
    margin-bottom: -1px;
    width: 80%;

    padding: 5px;
}

div.chirp_avatar_region {
    display: inline-block;

    width: 10%;
    height: 100%;

    text-align: center;

    /*border-style: none;*/
}

div.chirp_content {
    display: inline-block;

    width: 80%;
    height: 100%;

    /*border-style: none;*/
}

div.chirp_avatar_region > img, div.chirp_content > p {
    margin-top: 0;
    vertical-align: middle;
}

Answer 1

您可以浮动内部div，然后清除容器后面的浮动

或

使用vertical-align：top将div放在容器顶部

Answer 2

不完全确定，但我认为发生的是通过定义position：inline-block，它将它们放在同一行上，并使line-height成为chirp_content容器的高度。从某种意义上说，无论如何设置为vertical-align：top;它应该解决它。

实施例

.chirp_content, .chirp_avatar_region{ vertical-align:top; }

JS Fiddle

Answer 3

给avatar_region一个float：left，并删除它的width：和height：设置。删除chirp_content div，它会绕过内联。

修复两个子div的对齐方式

3 个答案: