Mam dwa elementy na tej samej linii pływające w lewo i pływające w prawo.
<style type="text/css">
#element1 {float:left;}
#element2 {float:right;}
</style>
<div id="element1">
element 1 markup
</div>
<div id="element2">
element 2 markup
</div>
Potrzebuję, aby element2 wyrównał się obok elementu1 z około 10 pikselami wypełnienia między nimi. Problem polega na tym, że szerokość elementu2 może się zmieniać w zależności od zawartości i przeglądarki (rozmiar czcionki itp.), Więc nie zawsze jest idealnie wyrównana z elementem1 (nie mogę po prostu zastosować marginesu w prawo i przesunąć go).
Nie mogę też zmienić znaczników.
Czy istnieje jednolity sposób ich wyrównania? Próbowałem z wartością procentową z marginesem, próbowałem z ujemnym marginesem na elemencie1, aby zbliżyć element2 do siebie (ale nie mogłem go uruchomić).
Odpowiedzi:
Za pomocą
display:inline-block
#element1 {display:inline-block;margin-right:10px;} #element2 {display:inline-block;}
Przykład
źródło
<style> div { display: flex; justify-content: space-between; } </style> <div> <p>Item one</p> <a>Item two</a> </div>
źródło
#element1 {float:left;} #element2 {padding-left : 20px; float:left;}
skrzypce: http://jsfiddle.net/sKqZJ/
lub
#element1 {float:left;} #element2 {margin-left : 20px;float:left;}
skrzypce: http://jsfiddle.net/sKqZJ/1/
lub
#element1 {padding-right : 20px; float:left;} #element2 {float:left;}
skrzypce: http://jsfiddle.net/sKqZJ/2/
lub
#element1 {margin-right : 20px; float:left;} #element2 {float:left;}
skrzypce: http://jsfiddle.net/sKqZJ/3/
odniesienie: Różnica między marginesami CSS a wypełnieniem
źródło
Używając display: inline-block; I bardziej ogólnie, gdy masz rodzica (zawsze jest rodzic, z wyjątkiem html), użyj
display: inline-block;
elementów wewnętrznych. i zmusić je do pozostania w tej samej linii, nawet gdy okno się skurczy (skurczy). Dodaj dla rodzica dwie właściwości:white-space: nowrap; overflow-x: auto;
tutaj bardziej sformatowany przykład, aby było jasne:
.parent { white-space: nowrap; overflow-x: auto; } .children { display: inline-block; margin-left: 20px; }
Szczególnie w tym przykładzie możesz zastosować powyższe jako kolega (przypuszczam, że rodzic jest treścią. Jeśli nie, umieść właściwego rodzica), możesz także zmienić kod HTML i dodać dla nich rodzica, jeśli to możliwe.
body { /*body may pose problem depend on you context, there is no better then have a specific parent*/ white-space: nowrap; overflow-x: auto; } #element1, #element2{ /*you can like put each one separately, if the margin for the first element is not wanted*/ display: inline-block; margin-left: 10px; }
pamiętaj o tym
white-space: nowrap;
ioverlow-x: auto;
to jest to, czego potrzebujesz, aby zmusić ich do pozostania w jednej linii. spacja: nowrap; wyłącz zawijanie. I overlow-x: auto; aby aktywować przewijanie, gdy element przekroczy limit ramki.źródło
W przypadkach, w których używam takich elementów pływających, zwykle muszę mieć pewność, że element kontenera będzie zawsze wystarczająco duży, aby szerokość obu elementów pływających plus wymagany margines zmieścił się w nim. Najłatwiejszym sposobem jest oczywiście nadanie obu elementom wewnętrznym stałej szerokości, która będzie pasować do wnętrza elementu zewnętrznego w następujący sposób:
#container {width: 960px;} #element1 {float:left; width:745px; margin-right:15px;} #element2 {float:right; width:200px;}
Jeśli nie możesz tego zrobić, ponieważ jest to układ ze skalowaniem szerokości, inną opcją jest ustawienie każdego zestawu wymiarów w procentach, takich jak:
#element1 {float:left; width:70%; margin-right:10%} #element2 {float:right; width:20%;}
To staje się trudne, gdy potrzebujesz czegoś takiego:
#element1 {float:left; width:70%; margin-right:10%} #element2 {float:right; width:200px;}
W takich przypadkach uważam, że czasami najlepszą opcją jest rezygnacja z pływaków i użycie pozycjonowania względnego / bezwzględnego, aby uzyskać taki sam efekt:
#container {position:relative;} /* So IE won't bork the absolute positioning of #element2 */ #element1 {margin-right:215px;} #element2 {display: block; position:absolute; top:0; right:0; height:100%; width:200px;}
Chociaż nie jest to rozwiązanie pływające, powoduje to, że kolumny obok siebie mają tę samą wysokość i jedna z nich może pozostać płynna, podczas gdy druga ma statyczną szerokość.
źródło
Zmień swój CSS, jak poniżej
#element1 {float:left;margin-right:10px;} #element2 {float:left;}
Oto JSFiddle http://jsfiddle.net/a4aME/
źródło
To jest to, czego użyłem w przypadku podobnego rodzaju użycia jak twój.
<style type="text/css"> #element1 {display:inline-block; width:45%; padding:10px} #element2 {display:inline-block; width:45%; padding:10px} </style> <div id="element1"> element 1 markup </div> <div id="element2"> element 2 markup </div>
Dostosuj szerokość i wyściółkę zgodnie z wymaganiami. Uwaga - nie przekraczaj 'width' więcej niż 100% łącznie (ele1_width + ele2_width), aby dodać 'dopełnienie', utrzymuj to mniej niż 100%.
źródło