Porównaj ceny domen i usług IT, sprzedawców z całego świata

Wyrównanie w pionie CSS nie działa z float


Jak mogę użyć
vertical-align
oraz
float
we właściwościach
div
?
vertical-align
działa dobrze, jeśli Nie używam
float
. Ale jeśli używam pływaka, to nie działa. Ważne jest dla mnie użycie
float: right
dla ostatniego div.
Próbuję śledzić, jeśli usuniesz zmiennoprzecinkowy ze wszystkich elementów div, to działa dobrze:
<div class="wrap">
<div class="left">First div, float left, has more text.
<div class="left2">Second div, float left
<div class="right">Third div, float right


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
http://jsfiddle.net/J5Ujj/1/
Zaproszony:
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Musisz ustawić wysokość linii.
<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;">

http://jsfiddle.net/VBR5J
http://jsfiddle.net/VBR5J/
/
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Edytowano:
własność
vertical-align
https://developer.mozilla.org/ ... align

CSS definiuje pionowe wyrównanie elementu inline, inline-block lub table-cell.
Przeczytaj ten artykuł dla
zrozumienie wyrównania pionowego
http://phrogz.net/CSS/vertical-align/index.html
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Wyrównanie w pionie tak naprawdę nie działa z elementami pływającymi. Dzieje się tak, ponieważ pływak podnosi element poza normalny przepływ dokumentu.
Możesz użyć innych technik wyrównania w pionie, takich jak te oparte na transform, display: table, pozycjonowaniu bezwzględnym, wysokości linii, js (być może w ostateczności) lub nawet zwykłej starej tabeli html (być może pierwszego wyboru, jeśli treść jest faktycznie tabelaryczna). Przekonasz się, że toczy się gorąca debata na ten temat.
Jednak w ten sposób możesz wyrównać w pionie 3 elementy 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;
}

Nie wiem, dlaczego potrzebujesz zarówno stałej szerokości, jak i wyświetlania: inline i floating.

Aby odpowiedzieć na pytania, Zaloguj się lub Zarejestruj się