css - 垂直对齐的对齐问题

标签 css html

我使用下面引用的 HTML 和 CSS 创建一个气泡类型 div。它的高度宽度应根据内容进行调整。

除了我想按垂直顺序查看所有 div 之外,一切都很完美,我在这里错过了什么?

非常感谢使用 JSFiddle 的回答。

HTML:

<div class="chat">
<div class="bubble me">Hello there!</div>

<div class="bubble me">Awesome.</div>
</div>
<div class="bubble me">Awesome.</div>
</div>
<div class="bubble me">Awesome. Awesome. Awesome. Awesome. Awesome.</div>
</div>
<div class="bubble me">Awesome.</div>
</div>

CSS:

.chat {
    width: 400px;
}

.bubble{
    background-color: #F2F2F2;
    border-radius: 5px;
    box-shadow: 0 0 6px #B2B2B2;
    display: inline-block;
    padding: 10px 18px;
    position: relative;
    vertical-align: top;
}

.bubble::before {
    background-color: #F2F2F2;
    content: "\00a0";
    display: block;
    height: 16px;
    position: absolute;
    top: 11px;
    transform:             rotate( 29deg ) skew( -35deg );
        -moz-transform:    rotate( 29deg ) skew( -35deg );
        -ms-transform:     rotate( 29deg ) skew( -35deg );
        -o-transform:      rotate( 29deg ) skew( -35deg );
        -webkit-transform: rotate( 29deg ) skew( -35deg );
    width:  20px;
}

.me {
    float: left;   
    margin: 5px 45px 5px 20px;         
}

.me::before {
    box-shadow: -2px 2px 2px 0 rgba( 178, 178, 178, .4 );
    left: -9px;           
}

JSFiddle example here

最佳答案

您可以将 clear:left 添加到此类:

.me {
    float: left;   
    margin: 5px 45px 5px 20px;   
    clear: left;/*Add clear left*/
}

fiddle

也看看这里 Controlling flow next to floats: the 'clear' property

关于css - 垂直对齐的对齐问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25567368/

相关文章:

html - R Markdown 图图例被切断

javascript - 数字 : any way to determine the locale?

css - 我可以使用显示器 :inline with text-align: right?

css - Firefox 条件注释 CSS

php - Facebook 图形 API : rendering posts like Facebook

python - Django,将HTML放入模板时自动出现HTML "sanitizing",如何停止?

c# - 如何将当前时间与一天中的时间进行比较

html - 嵌套的 div 在 firefox 中不可见,但在 chrome 中可见

css - 使图像响应

html - col-sm-4 高度自举