如何使用div个属性中的vertical-alignfloat?如果我不用float的话,vertical-align可以正常工作.但是如果我使用彩车,它就不起作用了.对我来说,使用float:right作为最后一个分区是很重要的.

我正在try 以下操作,如果您从所有div中删除浮动,那么它会工作得很好:

<div class="wrap">
    <div class="left">First div, float left,  has more text.</div>
    <div class="left2">Second div, float left </div>
    <div class="right">Third div, float right</div>
</div>

CSS:

.wrap{
    width: 500px;
    overflow:hidden;    
    background: pink;
}

.left {
    width: 150px;       
    margin-right: 10px;
    background: yellow;  
    float:left;
    vertical-align: middle;  
    display:inline-block

}

.left2 {
    width: 150px;    
    margin-right: 10px;
    background: aqua;
    float:left;
    vertical-align: middle;   
    display:inline-block
}

.right{
    width: 150px;
    background: orange;
    float:right;
    vertical-align: middle;
    display:inline-block
}

JSFiddle

推荐答案

您需要设置行高.

<div style="border: 1px solid red;">
<span style="font-size: 38px; vertical-align:middle; float:left; line-height: 38px">Hejsan</span>
<span style="font-size: 13px; vertical-align:middle; float:right; line-height: 38px">svejsan</span>
<div style="clear: both;"></div>

http://jsfiddle.net/VBR5J/

Css相关问答推荐

如何使搜索框扩展并溢出其他内容

需要Angular material 下拉面板有向下和向上箭头按钮

如何使用遮罩创建手绘SVG动画

如何使背景出现在具有自己背景 colored颜色 的子元素上

在 Next.js 中使用 .modules.scss 时未应用样式

如何向 Highcharts 迷你图添加具有淡入淡出效果的线性渐变?

有没有办法将px单位添加到 Sass mixin 的参数数组中?

为什么左浮动上的清除:左也会影响右浮动,以及如何避免它

直观地指示 IFrame 内的表单正在提交,但没有 javascript

如何在 nth-child 中正确传递 CSS 变量?

如何将 .btn-group 从 twitter-bootstrap 居中?

单击时 HTML 输入字段未获得焦点

如何在 html/css 中的图像旁边垂直居中文本?

CSS:在图像周围创建白光

将 Web 字体转换和渲染为 base64 - 保持原始外观

如何计算所需的色调旋转以生成特定 colored颜色 ?

在 CSS 中结合border-top、border-right、border-left、border-bottom

bootstrap 关闭响应菜单点击

可见性:隐藏 vs 显示:无 vs 不透明度:0

CSS显示:表格列应该如何工作?