比较来自世界各地的卖家的域名和 IT 服务价格

CSS 垂直对齐不适用于浮点数

我怎样才能使用
vertical-align

, 和
float

在财产中
div

?
vertical-align

如果我不使用完美的工作
float

. 但是如果我使用浮子,它就不起作用。 使用我很重要
float:right

对于最后一个div。

如果你从所有人中删除浮子,我正在尝试遵循 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
}


http://jsfiddle.net/J5Ujj/1/
已邀请:

石油百科

赞同来自:

您需要设置行的高度。


<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/
/
</div>
<div class="answer_text">
编辑:

财产

https://developer.mozilla.org/ ... align
CSS 指定垂直元素对齐 inline, inline-block 或者 table-cell.

阅读本文

http://phrogz.net/CSS/vertical-align/index.html
</div>
<div class="answer_text">
垂直对齐真的不适用于浮动元素。 这是因为 float 从文档的正常流程提出元素。
您可能想要使用其他垂直对齐方式,例如,基于 transform, display: table, absolute positioning, line-height, js /也许在极端情况下/ 甚至是通常的旧 html table /也许如果内容实际上是表格的第一选择/. 你会看到它是关于这个问题的热门辩论。

但是,这就是如何垂直对齐的 YOUR 3 divs:


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

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

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

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


我不知道为什么需要固定宽度,以及显示:内置块,浮动。
</div>

卫东

赞同来自:

编辑:

财产

https://developer.mozilla.org/ ... align
CSS 指定垂直元素对齐 inline, inline-block 或者 table-cell.

阅读本文

http://phrogz.net/CSS/vertical-align/index.html

喜特乐

赞同来自:

垂直对齐真的不适用于浮动元素。 这是因为 float 从文档的正常流程提出元素。
您可能想要使用其他垂直对齐方式,例如,基于 transform, display: table, absolute positioning, line-height, js /也许在极端情况下/ 甚至是通常的旧 html table /也许如果内容实际上是表格的第一选择/. 你会看到它是关于这个问题的热门辩论。

但是,这就是如何垂直对齐的 YOUR 3 divs:


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

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

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

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


我不知道为什么需要固定宽度,以及显示:内置块,浮动。

要回复问题请先登录注册