Skocz do zawartości
  • Przeglądający   0 użytkowników

    Brak zarejestrowanych użytkowników, przeglądających tę stronę.

P0Y3B

[Nieaktualny] Wyrównanie elementów przy mniejszej rozdzielczości oraz .... [Nieaktualny]

Promowane odpowiedzi

P0Y3B    158

Dobry.

 

Mam taki kod: (okno modalne boostrap)

<div class="modal fade" id="myPhoto" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Zamknij</span></button>
<h4 class="modal-title" id="myModalLabel"><div style="text-align: center;">Moja galeria</div></h4>
</div>
<div class="modal-body">
<p>
<div class="ramka-obrazek>
<div class="opis">To Ja xD</div>
<a href="img/toja.png" target="_blank"><img src="img/toja.png" style="background-size: cover; width:150px; height:180px;border-radius:12px;" /></a>
<div class="data">12.04.2017</div>
</div>
<div class="ramka-obrazek>
<div class="opis">To Ja xD</div>
<a href="img/toja.png" target="_blank"><img src="img/toja.png" style="background-size: cover; width:150px; height:180px;border-radius:12px;" /></a>
<div class="data">12.04.2017</div>
</div>
<div class="ramka-obrazek>
<div class="opis">To Ja xD</div>
<a href="img/toja.png" target="_blank"><img src="img/toja.png" style="background-size: cover; width:150px; height:180px;border-radius:12px;" /></a>
<div class="data">12.04.2017</div>
</div>
<div class="ramka-obrazek>
<div class="opis">To Ja xD</div>
<a href="img/toja.png" target="_blank"><img src="img/toja.png" style="background-size: cover; width:150px; height:180px;border-radius:12px;" /></a>
<div class="data">12.04.2017</div>
</div>
 
</p>
</div>
</div>
</div>
</div>

 

I wklejam do niego obrazki, i jak zrobić aby tło rozszerzało się ku dołu gdy obrazek ma już wyjść po za nie, 

 

CSS

.ramka-obrazek{ width: 150px; margin: 10px; float: left; }
.opis { background: -webkit-linear-gradient(left, #ed2035 0%,#f15d22 98%); margin-left: auto; margin-right: auto; font-weight: 700; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; height: 38px; line-height: 38px; color: #fff; padding: 0px 23px; position: relative; display: block; border: 0; font-size: 13px; width: 130px; margin-bottom: 3px; }
.info-data { font-weight: 700; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; height: 38px; line-height: 38px; color: #fff; padding: 0px 23px; position: relative; display: block; border: 0; font-size: 13px; background: #62aa27; background: -moz-linear-gradient(left, #62aa27 0%, #b7da33 100%); background: -webkit-linear-gradient(left, #62aa27 0%,#b7da33 100%); background: linear-gradient(to right, #62aa27 0%,#b7da33 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#62aa27', endColorstr='#b7da33',GradientType=1 ); width: 130px; margin-left: auto; margin-right: auto; margin-top: 3px;}

  • Nie lubię tego! 3

Udostępnij tego posta


Odnośnik do posta
Udostępnij na innych stronach
Mativve    1,284

Dla #myPhoto .modal-content dodałem overflow:hidden; Zawsze jak masz taki problem i div nie dostosuje swojej wysokości do contentu, a w contencie są divy z float to dodawaj overflow:hidden;

 

 

  • Lubię to! 1

Udostępnij tego posta


Odnośnik do posta
Udostępnij na innych stronach
Gość
Ten temat został zamknięty. Brak możliwości dodania odpowiedzi.

×