Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [HTML][CSS]Kilka divów obok siebie.
Gruchol
post 19.01.2015, 22:10:28
Post #1





Grupa: Zarejestrowani
Postów: 242
Pomógł: 0
Dołączył: 28.11.2014

Ostrzeżenie: (0%)
-----


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.

Ten post edytował Gruchol 20.01.2015, 07:14:34
Go to the top of the page
+Quote Post
Lord
post 19.01.2015, 23:17:36
Post #2





Grupa: Zarejestrowani
Postów: 239
Pomógł: 32
Dołączył: 10.03.2004

Ostrzeżenie: (10%)
X----


  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
Go to the top of the page
+Quote Post
Gruchol
post 20.01.2015, 07:13:56
Post #3





Grupa: Zarejestrowani
Postów: 242
Pomógł: 0
Dołączył: 28.11.2014

Ostrzeżenie: (0%)
-----


Tzn. chciałbym otrzymać mniej więcej taki efekt :
http://screenshooter.net/101736853/gduyfgg
Go to the top of the page
+Quote Post
fate
post 20.01.2015, 09:35:31
Post #4





Grupa: Zarejestrowani
Postów: 824
Pomógł: 106
Dołączył: 14.03.2012
Skąd: Warszawa

Ostrzeżenie: (0%)
-----


To spróbuj tak:
http://jsfiddle.net/kupn748w/


--------------------
Go to the top of the page
+Quote Post
Gruchol
post 20.01.2015, 16:09:29
Post #5





Grupa: Zarejestrowani
Postów: 242
Pomógł: 0
Dołączył: 28.11.2014

Ostrzeżenie: (0%)
-----


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 ..?
Go to the top of the page
+Quote Post
fate
post 20.01.2015, 17:02:05
Post #6





Grupa: Zarejestrowani
Postów: 824
Pomógł: 106
Dołączył: 14.03.2012
Skąd: Warszawa

Ostrzeżenie: (0%)
-----


wstaw kod ktory masz na
http://jsfiddle.net/
to ci poprawie


--------------------
Go to the top of the page
+Quote Post
Gruchol
post 20.01.2015, 17:25:06
Post #7





Grupa: Zarejestrowani
Postów: 242
Pomógł: 0
Dołączył: 28.11.2014

Ostrzeżenie: (0%)
-----


http://jsfiddle.net/6b4g9ryj/ to jest mój kod.
Z góry dzięki za pomoc ;p
Go to the top of the page
+Quote Post
fate
post 21.01.2015, 11:21:44
Post #8





Grupa: Zarejestrowani
Postów: 824
Pomógł: 106
Dołączył: 14.03.2012
Skąd: Warszawa

Ostrzeżenie: (0%)
-----


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/


--------------------
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Wersja Lo-Fi Aktualny czas: 22.05.2024 - 09:27