Bagaimana saya bisa menggunakan vertical-align
serta mengapung
di div
properties? Vertical-align
bekerja dengan baik jika saya tidak menggunakan mengapung
. Tapi jika saya menggunakan float, maka itu tidak bekerja. Hal ini penting bagi saya untuk menggunakan float:right
untuk terakhir div.
Saya mencoba mengikuti, jika anda menghapus float dari semua div's maka itu akan bekerja dengan baik:
<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
}
Anda perlu untuk mengatur line-height.
<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>
Edited:
The vertical-align CSS properti menentukan perataan vertikal dari sebuah inline skate, inline-block atau tabel-elemen sel.
Baca artikel ini untuk Pemahaman vertical-align
Perataan vertikal doesn't bekerja dengan melayang elemen, memang. Yang's karena mengapung mengangkat elemen dari aliran normal dari dokumen. Anda mungkin ingin menggunakan vertikal lainnya menyelaraskan teknik, seperti yang didasarkan pada mengubah, menampilkan: meja, posisi mutlak, line-height, js (terakhir mungkin) atau bahkan tua polos tabel html (mungkin pilihan pertama jika konten adalah benar-benar tabular). Anda'll menemukan bahwa ada's perdebatan sengit tentang masalah ini.
Namun, ini adalah bagaimana anda dapat vertikal menyelaraskan 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;
}
Tidak yakin mengapa anda membutuhkan fixed width, display: inline-block dan mengambang.