Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Kilka elementów w jednej linii
Forum PHP.pl > Forum > Po stronie przeglądarki > HTML \ XHTML
CPoDe
Witam, od pewnego czasu walczę z przyczepieniem kilku elementów do jednej linii. Zwykłe float nie daje rady, ponieważ wszystkie elementy znajdują się wewnątrz diva z ustawionymi scroll-ami.

Poniżej zamieszczam przykład dla lepszego zrozumienia problemu:

  1. <div style="overflow:scroll;width:20px;">
  2. <img src="..." style="width:15px;" />
  3. <img src="..." style="width:15px;" />
  4. </div>


Jak widać powyżej dwa obrazki razem mają 30px szerokości, ale wyświetlą się pod sobą. Chciałbym, aby oba te rysunki wyświetliły się w jednej linii. Niestety float nie daje efektu sad.gif
Olsz4k
A jak chcesz zmieścić 2 obrazki po 15px w divie mającym 20px?
Float zadziała, tylko zwiększ szerokość diva w którym znajdują się obrazki (chyba trzeba brać poprawkę na miejsce dla scrolla więc sprawdź, bo np. 30px może dalej nie wystarczać)
CPoDe
O chłopie, to po co dodają owerflow-x .... Chce po prostu połączyć te obiekty tak aby się nie załamywały.
PrinceOfPersia
jeszcze możesz spróbować z display:inline-block
kamil4u
img ma od razu display:inline-block; smile.gif - http://dev.w3.org/html5/markup/img.html#img-display

Kod
    <div style="overflow:scroll;width:200px;">
<div style="width: 300px;">
    <img src="..." style="width:150px;" />
    <img src="..." style="width:150px; float: left;" />
</div>
    </div>
CPoDe
tak podejrzewałem iż ktoś zaproponuje wrzucenie obrazków do kolejnego diva. Niestety nie wchodzi to w grę, ponieważ nie znam ilości obrazków i wymagałoby to pisania kolejnego skryptu do liczenia tego wszystkiego.
kamil4u
A po co Ci ilość obrazków do tego? Jeśli po to, żeby ustawić szerokość tego div-a to daj jakąś dużą wartość, której wiesz, że nie przekroczysz i/lub policz w JS prawidłową szerokość.

Nie kojarzę w tej chwili innego rozwiązania Twojego problemu smile.gif

--edit--
@down:
Szczerze powiem, że white-space:nowrap; nie przyszło mi do głowy - fajne rozwiązanie
CPoDe
Problem został rozwiązany smile.gif

Okazało się iż float powodował ten bląd oO Ustawiłem go na początku pisania skryptu, aby wszystko się trzymało kupy smile.gif ale jeżeli juz i tak mam white-space ustawione, to nie potrzebne jest mi przyczepienie do lewej strony. Swoją drogą, myślałem iż float bierze pod uwagę elementy i przyczepia się do tego ostatniego z danej strony. Tymczasem element ten dąży do lewej krawędzi obiektu nadrzędnego.

Rozwiązanie:
http://jsfiddle.net/3yQ6L/123/
(edytowany gotowy skrypt)
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.