Wyrównanie w pionie CSS nie działa z float
Jak mogę użyć
vertical-alignoraz
floatwe właściwościach
div?
vertical-aligndział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: rightdla 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/
Nie znaleziono powiązanych wyników
Zaproszony:
Aby odpowiedzieć na pytania, Zaloguj się lub Zarejestruj się
3 odpowiedzi
Anonimowy użytkownik
Potwierdzenie od:
http://jsfiddle.net/VBR5J
http://jsfiddle.net/VBR5J/
/
Anonimowy użytkownik
Potwierdzenie od:
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
Potwierdzenie od:
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.