CSS Căn chỉnh dọc không hoạt động với float

Làm thế nào tôi có thể sử dụng vertical-aligncũng như floattrong các divthuộc tính? Các vertical-alignhoạt động tốt nếu tôi không sử dụng float. Nhưng nếu tôi sử dụng phao, thì nó không hoạt động. Điều quan trọng đối với tôi là sử dụng float:rightcho div cuối cùng.

Tôi đang thử làm theo, nếu bạn xóa float khỏi tất cả các div thì nó sẽ hoạt động tốt:

<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

Bạn cần đặt chiều cao dòng.

<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/

Đã chỉnh sửa:

Các vertical-align thuộc tính CSS xác định sự liên kết dọc của một inline, inline-block hoặc yếu tố table-cell.

Đọc bài viết này để hiểu về căn chỉnh theo chiều dọc

Căn chỉnh dọc không hoạt động với các phần tử nổi. Đó là bởi vì float nâng phần tử khỏi luồng thông thường của tài liệu. Bạn có thể muốn sử dụng các kỹ thuật căn chỉnh theo chiều dọc khác, như các kỹ thuật dựa trên chuyển đổi, hiển thị: bảng, định vị tuyệt đối, chiều cao dòng, js (có thể là phương sách cuối cùng) hoặc thậm chí là bảng html cũ đơn giản (có thể là lựa chọn đầu tiên nếu nội dung thực tế là dạng bảng). Bạn sẽ thấy rằng có một cuộc tranh luận sôi nổi về vấn đề này.

Tuy nhiên, đây là cách bạn có thể căn chỉnh theo chiều dọc 3 div của BẠN:

.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; 
}

Không chắc tại sao bạn cần cả chiều rộng cố định, hiển thị: inline-block và float.