[CSS] inny wygląd div-ów (na przemian) Opcje

[dopelganger]

cześć
czy można za pomocą CSS określić wygląd divów na stronie (szerokość) - na przemian (jak poniżej):

2 wąskie, 1 szeroki
1 szeroki, 2 wąskie
itd...

Obrazowo, to coś takiego:

[] [] [__]
[__] [] []
[] [] [__]
[__] [] []
itd...


Proszę o pomoc.

Ten post edytował dopelganger 18.05.2015, 13:22:57

[trueblue]

http://jsfiddle.net/gq64w55c/2/

[dopelganger]

http://jsfiddle.net/gq64w55c/2/

dzięki, działa

z tym, że jeśli osadzam w divach obrazki i dla nich chcę wprowadzić coś podobnego to nie działa ,,, tak jakby klauzula nth-child dotyczyła tylko zewnętrznych elementów, ale osadzonych wewnątrz już nie :/

[robertpiaty]

Pokaż fragment css jak ustawiasz wygląd tych div-ów i obrazków.

[dopelganger]

Pokaż fragment css jak ustawiasz wygląd tych div-ów i obrazków.

[PHP] pobierz, plaintext 
.artimg {
	background-clip:content-box;
	display:block;
	height:210px;
	width:565px;
	overflow:hidden;
}
.art {
    width:272px;
    height:300px;
    background:#eee;
    float:left;
 
    background-clip:content-box;
    display:block;
    overflow:hidden;
}
.art:nth-child(3n+1) {
    clear:left;
}
.art:nth-child(3n+3), .art:nth-child(6n+4) {
    width:565px;
    background:#ccc;
}
.art:nth-child(6n) {
    width:272px;
    background:#eee;
}
.art img { max-width:565px; }
[PHP] pobierz, plaintext 

[PHP] pobierz, plaintext 
{% for key, new_article in new %}
  <article class="art">
  <a href="" class="artimg"><img src="{{ asset("images/" ~ new_article.image) }}" /></a>
  </article>
{% endfor %}
[PHP] pobierz, plaintext 

Ten post edytował dopelganger 19.05.2015, 09:06:31

[robertpiaty]

Spróbuj zrobić selektor obrazka w podobny sposób co article np.

[PHP] pobierz, plaintext 
.art:nth-child(6n) img{
     max-width: 272px;
}
[PHP] pobierz, plaintext 

Dla niektórych .art ustawiasz szerokość 565px a dla niektórych 272px natomiast dla obrazków ustawiasz tylko max-width 565px

[dopelganger]

Spróbuj zrobić selektor obrazka w podobny sposób co article np.

[PHP] pobierz, plaintext 
.art:nth-child(6n) img{
     max-width: 272px;
}
[PHP] pobierz, plaintext 

Dla niektórych .art ustawiasz szerokość 565px a dla niektórych 272px natomiast dla obrazków ustawiasz tylko max-width 565px

nie działa, może to jakoś w jquery ugryźć? wszystkich jest zawsze 9 artykułów (nowych), tylko, że maxWidth coś w jquery znowu nie chce działać.

Ten post edytował dopelganger 19.05.2015, 09:28:59

[robertpiaty]

Jeśłi nie trzeba dynamicznie zmieniać wyglądu to ja bym nie robił tego za pomocą js.

Zobacz czy jakiś inny styl nie nadpisuje tego co teraz wprowadziłeś. Zwróć uwagę na .artimg z pierwszej linii. Z linka robisz element blokowy i też ustawiasz mu stałą szerokość.

[dopelganger]

Jeśłi nie trzeba dynamicznie zmieniać wyglądu to ja bym nie robił tego za pomocą js.

Zobacz czy jakiś inny styl nie nadpisuje tego co teraz wprowadziłeś. Zwróć uwagę na .artimg z pierwszej linii. Z linka robisz element blokowy i też ustawiasz mu stałą szerokość.

tak ustawiam link jako element blokowy (content-box), aby obrazki mieściły się w stałej wielkości (nieważne że przytnie)

w długim divie (565px) są obrazki na tą właśnie długość, a w krótkim chciałbym właśnie zmniejszyć obrazek...
nadpisywać raczej nie nadpisuje, bo są klasy których nie ma już w pliku css

Ten post edytował dopelganger 19.05.2015, 09:39:10

[trueblue]

Obrazki mają się dopasowywać szerokością do <div> bez względu na ich rozmiar czy dopasowywać tylko jeśli są szersze od <div>?
Jak rozumieć to, że obrazek ma mieć 272px szerokości, tj. ma być zeskalowany czy docięty na taką szerokość?

[dopelganger]

Obrazki mają się dopasowywać szerokością do <div> bez względu na ich rozmiar czy dopasowywać tylko jeśli są szersze od <div>?
Jak rozumieć to, że obrazek ma mieć 272px szerokości, tj. ma być zeskalowany czy docięty na taką szerokość?

docięty do szerokości i wysokości diva (artimg)- stąd content-boxy
z tym, że ta szerokość obrazka 272px to tylko testowa, możliwe że bedzie rozmiar obrazka (szerokość) będzie na np: 300px - max-width

tak żeby wyszło dobrze (IMG:style_emoticons/default/smile.gif)

Ten post edytował dopelganger 19.05.2015, 10:08:32