CSS แนวตั้งแนวตั้งใช้ไม่ได้กับ float

ฉันจะใช้vertical-alignเช่นเดียวกับfloatในdivคุณสมบัติ? ใช้vertical-alignงานได้ดีถ้าฉันไม่ใช้ไฟล์float. แต่ถ้าใช้ลูกลอยแล้วไม่ได้ผล เป็นสิ่งสำคัญสำหรับฉันที่จะใช้float:rightสำหรับ div สุดท้าย

ฉันกำลังพยายามติดตามหากคุณลบ float ออกจาก 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 ระบุแนวตั้งของอินไลน์อินไลน์บล็อกหรือตารางเซลล์องค์ประกอบ

อ่านบทความนี้เพื่อทำความเข้าใจเกี่ยวกับแนวตั้ง

การจัดตำแหน่งแนวตั้งใช้ไม่ได้กับองค์ประกอบลอย นั่นเป็นเพราะ float ยกองค์ประกอบจากโฟลว์ปกติของเอกสาร คุณอาจต้องการใช้เทคนิคการจัดแนวแนวตั้งอื่น ๆ เช่นเทคนิคที่ใช้การแปลงการแสดง: ตารางการวางตำแหน่งสัมบูรณ์ความสูงของเส้น js (อาจเป็นทางเลือกสุดท้าย) หรือแม้แต่ตาราง html แบบเก่า (อาจเป็นตัวเลือกแรกหากเนื้อหาเป็น ตารางจริง) คุณจะพบว่ามีการถกเถียงกันอย่างดุเดือดในประเด็นนี้

อย่างไรก็ตามนี่คือวิธีที่คุณสามารถจัดแนว 3 div ของคุณในแนวตั้ง:

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

ไม่แน่ใจว่าเหตุใดคุณจึงต้องการทั้งความกว้างคงที่การแสดงผล: อินไลน์บล็อกและลอยตัว