Kilka elementów w jednej linii |
Kilka elementów w jednej linii |
14.09.2013, 03:39:08
Post
#1
|
|
Grupa: Zarejestrowani Postów: 32 Pomógł: 0 Dołączył: 17.05.2013 Ostrzeżenie: (0%) |
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: 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 Ten post edytował CPoDe 14.09.2013, 03:39:45 |
|
|
14.09.2013, 10:03:20
Post
#2
|
|
Grupa: Zarejestrowani Postów: 95 Pomógł: 0 Dołączył: 26.07.2013 Skąd: Kraków Ostrzeżenie: (0%) |
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ć) |
|
|
14.09.2013, 11:24:30
Post
#3
|
|
Grupa: Zarejestrowani Postów: 32 Pomógł: 0 Dołączył: 17.05.2013 Ostrzeżenie: (0%) |
O chłopie, to po co dodają owerflow-x .... Chce po prostu połączyć te obiekty tak aby się nie załamywały.
|
|
|
14.09.2013, 11:28:39
Post
#4
|
|
Grupa: Zarejestrowani Postów: 717 Pomógł: 120 Dołączył: 18.04.2009 Ostrzeżenie: (0%) |
jeszcze możesz spróbować z display:inline-block
-------------------- |
|
|
14.09.2013, 13:59:20
Post
#5
|
|
Grupa: Zarejestrowani Postów: 2 350 Pomógł: 512 Dołączył: 4.01.2009 Skąd: Wrocław / Świdnica Ostrzeżenie: (0%) |
img ma od razu display:inline-block; - 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> Ten post edytował kamil4u 14.09.2013, 14:00:21 -------------------- |
|
|
14.09.2013, 15:06:48
Post
#6
|
|
Grupa: Zarejestrowani Postów: 32 Pomógł: 0 Dołączył: 17.05.2013 Ostrzeżenie: (0%) |
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.
|
|
|
14.09.2013, 15:15:29
Post
#7
|
|
Grupa: Zarejestrowani Postów: 2 350 Pomógł: 512 Dołączył: 4.01.2009 Skąd: Wrocław / Świdnica Ostrzeżenie: (0%) |
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 --edit-- @down: Szczerze powiem, że white-space:nowrap; nie przyszło mi do głowy - fajne rozwiązanie Ten post edytował kamil4u 14.09.2013, 16:50:05 -------------------- |
|
|
16.09.2013, 17:42:01
Post
#8
|
|
Grupa: Zarejestrowani Postów: 32 Pomógł: 0 Dołączył: 17.05.2013 Ostrzeżenie: (0%) |
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) |
|
|
Wersja Lo-Fi | Aktualny czas: 26.04.2024 - 13:07 |