Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][CSS]Kilka divów obok siebie.
Forum PHP.pl > Forum > Przedszkole
Gruchol
Witam,
Mam takie dwa divy :

  1. <div class="1">
  2. <img class="img-circle" src="obrazek1" style="width: 140px; height: 140px;">
  3. <h2>Opis</h2>
  4. <p>Opis2</p>
  5. <p><a class="przycisk" href="show.php?id=11" role="button">Wyslij</a></p>
  6. </div>


( 2 są takie same dla testu )

I chcę aby te obrazki razem z przyciskami były obok siebie, i oddzielał je np. margines 10px.
Jak wklejam te divy to jest jeden pod drugim.
Żadnego cssa nie stosowałem do tego na razie bo nawet nie wiem jak to zacząć.

Z góry dziękuję i pozdrawiam.
Lord
  1. div.jeden{
  2. width: 45%;
  3. float: left;
  4. margin-right: 10%;
  5. }
  6.  
  7. div.dwa{
  8. width: 45%;
  9. float: left;
  10. }


Dwa divy maja być koło siebie?
div domyślnie ma 100% szerokości jaka mu pozostawiłeś, wiec musisz nadać mu szerokość i następnie dać float: left lub right w zależności do której strony chcesz równać smile.gif
Gruchol
Tzn. chciałbym otrzymać mniej więcej taki efekt :
http://screenshooter.net/101736853/gduyfgg
fate
To spróbuj tak:
http://jsfiddle.net/kupn748w/
Gruchol
Nie można tego jakoś łatwiej zrobić ?
Dopiero się uczę i taki zapis to dla mnie czarna magia.

Pisałem tamten post z telefonu i tak teraz patrzę, że to jest wklejony obrazek i tyle.. ja chcę aby tam działał przycisk itp.
Do tego jakieś zapisy typu :

  1. <p style="text-align: justify"><img id="logo2" alt="ScreenShooter" width="64" height="40" style="float: left" src="data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=" />ScreenShooter służy do szybkiego robienia zrzutów ekranu i łatwego wysyłania ich do sieci.</p>
  2. <p style="text-align: justify">Wystarczy, ze klikniesz &quot;Zrzut ekranu&quot; (lub klawisz F9), zaznaczysz obszar a w schowku znajdziesz gotowego linka. Teraz każdy, kto otrzyma linka, bedzie mógł zobaczyć Twój zrzut ekranu.</p>
  3. <p class="ZzZail">Jeżeli masz uwagę odnośnie działania serwisu, albo chcesz zgłosić nadużycie napisz o tym na adres: <a class="ZzZail" href="mailto:SSShelpXXXgZZZl.com">SSShelpXXXgZZZl.com</a></p>
  4. <a class="btn" href="/screenshooter-setup.exe">Pobierz program ScreenShooter</a>



o co tutaj chodzi ..?
fate
wstaw kod ktory masz na
http://jsfiddle.net/
to ci poprawie
Gruchol
http://jsfiddle.net/6b4g9ryj/ to jest mój kod.
Z góry dzięki za pomoc ;p
fate
wystarczyło dodac: .col-lg-3{float:left;margin:10px;} ale dodałem
  1. .col-lg-3{float:left;margin:10px;background: #eee;border-radius:3px;padding:10px}
  2. .col-lg-3 p a{text-decoration:none; border:2px solid #aaa; padding: 5px 10px;color:#222;background:#ddd}
  3. .col-lg-3 p a:hover{background:#fff}


http://jsfiddle.net/6b4g9ryj/1/
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.