ugrás a tartalomhoz

HTML szerkezet

alkony4 · 2016. Aug. 12. (P), 16.55
Tiszteletem!

Az alábbi html szerkezetet szeretném előállítani css-el, javascript és egyéb eszközök használata nélkül.
KÉP
Hasonló jellegű témakör volt már de nem volt kielégítő a válasz.

Megtisztelő válaszotokat előre is köszönöm!

Üdvözlettel, Alkony
‹ Tömb permutáció / értékek hasonlítása nem fut le az email küldő php ›
 ■
1

Hali! Miért zárod ki

smokey · 2016. Aug. 12. (P), 23.17
Hali! Miért zárod ki javascript és egyéb eszközök használatát?
2

Hello, hát ha valami egyszerű

alkony4 · 2016. Aug. 13. (Szo), 10.05
Hello, hát ha valami egyszerű javascript kóddal megoldható akkor az se gond, de nem kifejezetten tartom kósernek, hogy ha html kódszerkezetet javascripttel állítunk elő, erre szolgálna a html css kombó. Lehet tévedek de valahogy, jobb érzést adna ha ez megoldható lenne css + html-el de az egyéb jó ötleteket is szívesen várom.
3

megoldható

Pepita · 2016. Aug. 13. (Szo), 12.18
Nem kell hozzá JavaScript.

Mire jutottál eddig? Készíts egy alap html ötletet+CSS, lássunk kódot, akkor tudunk segíteni, hogy mi helyett mi a jobb.

Szerk (Amúgy nagyon egyszerűen is meg lehet oldani, de jobb úgy, ha megpróbálsz valamit, és csak segítünk -》mégis tiéd a megoldás sikerélménye )
4

Az a gond, hogy már a

alkony4 · 2016. Aug. 13. (Szo), 16.33
Az a gond, hogy már a kiindulással gond van miszerint nincs ötletem rá.
Korábban kaptam egy kiindulási pontot erre vonatkozóan de az nem volt kifejezetten jó.
Íme:
<ul>  
    <li>1. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li>  
    <li>2. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</li>  
    <li>3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</li>  
    <li>4. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li>  
    <li>5. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</li>  
    <li>6. Lorem ipsum dolor sit amet</li>  
</ul>  
ul {  
    width: 900px;  
    -webkit-column-count: 4;  
    -moz-column-count: 4;  
    column-count: 4;  
    -webkit-column-gap: 10px;  
    -moz-column-gap: 10px;  
    column-gap: 10px;  
}  
li {  
    display: inline-block;  
    width: 200px;  
    background: #eee;  
    margin-bottom: 10px;  
    padding: 10px;  
}
Az oszlopokra bontás így tökéletes, csak nekem nem fentről lefelé kéne, hogy haladjon az elemek besorolása hanem balról jobbra.

Sajnos nem vagyok egy lángelme e téren, azért kérek segítséget ><

Megtisztelő válaszaitok, segítségeteket előre is köszönöm!
5

hát én nem tudom :)

szabo.b.gabor · 2016. Aug. 13. (Szo), 19.59
hát én nem tudom :) flexbox-szal lehet varázsolni, de ahogy megnéztem pár példaoldalt, nem nagyon találtam ilyet.

nem próbáltam ki, de mi van akkor ha azt mondod, hogy a normál li alapértelmezetten középen van, és js-sel kidobálod az adott elemeket igény szerint balra jobbra float-tal?
6

Mivel nem tudtam megoldani a

alkony4 · 2016. Aug. 13. (Szo), 23.46
Mivel nem tudtam megoldani a problémát ezért továbbra is várom a válaszokat : )
Köszönöm.
7

amit írtam az sajnos nem volt

szabo.b.gabor · 2016. Aug. 14. (V), 10.48
amit írtam az sajnos nem volt jó.

itt egy példa

de itt már varázsolni kell.. és js helyett csak kézzel dobáltam szét a dolgokat..
8

float left

Pepita · 2016. Aug. 14. (V), 14.59
Egy irányba float lesz a barátod, ha balról jobbra, fentről lefelé akarsz haladni. A fix szélesség fogja megszabni, hogy hány oszlop van. (Width: 33%;)
Próbáld ki, aztán még javítani lehet rajta. Továbbra is azt gondolom, hogy JS nem kell hozzá.
9

csak simán float left nem

szabo.b.gabor · 2016. Aug. 14. (V), 15.58
csak simán float left nem lesz jó, mert akkor a csatolt képen a 4-es doboz bár bal oldalra, de a 3-as alja alá kerülne..
10

Ún. varázslat

Joó Ádám · 2016. Aug. 15. (H), 19.20
<div class="container">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box">6</div>
  <div class="box">7</div>
  <div class="box">8</div>
</div>
.container {
  width: 320px;
}

.box {
  width: 100px;
  margin-bottom: 10px;
  margin-right: 10px;
  background-color: #bbb;
  color: red;
}

.box:nth-child(1) {
  height: 150px;
}

.box:nth-child(2) {
  height: 100px;
}

.box:nth-child(3) {
  height: 200px;
}

.box:nth-child(4) {
  height: 100px;
}

.box:nth-child(5) {
  height: 100px;
}

.box:nth-child(6) {
  height: 200px;
}

.box:nth-child(7) {
  height: 150px;
}

.box:nth-child(8) {
  height: 150px;
}
.container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

.box:nth-child(3n+2) {
  order: 1;
}

.box:nth-child(3n+3) {
  order: 2;
}

.box:nth-child(2), .box:nth-child(3) {
  page-break-before: always;
}
https://jsfiddle.net/00hk1rzd/
11

Ah nagyon szépen köszönöm az

alkony4 · 2016. Aug. 16. (K), 22.02
Ah nagyon szépen köszönöm az eddigi válaszokat viszont eddig sajnos egyik megoldás se az amit a képen mellékeltem >< talán még az utolsó válaszoló flexes megoldása a legjobb de annál az alábbi a probléma: KÉP

Nem töltődnek ki a rések.
Hogyan lehetne megoldani?
Előre is köszönöm.
12

Egy 48-as Firefoxon írtam,

Joó Ádám · 2016. Aug. 17. (Sze), 01.58
Egy 48-as Firefoxon írtam, nálam egy az egyben úgy néz ki, mint az eredeti képeden. Lehet, hogy más böngészőn kell egy-két prefix a tulajdonságok elé.
13

Valóban! Most megnéztem én is

alkony4 · 2016. Aug. 17. (Sze), 11.41
Valóban!
Most megnéztem én is firefoxban és ott valóban jól fest a dolog.
Viszont milyen prefixre volna szükség? Én chrome alatt néztem ott elég érdekes az eredmény.
Köszönöm
14

A képen látható elrendezés

Joó Ádám · 2016. Aug. 17. (Sze), 17.50
A képen látható elrendezés annak az eredménye, hogy oszlopos helyett soros az elrendezés. Nálam, egy 51-es Chrome-ban Linuxon ez a része rendben van.

A WebKit azonban úgy tűnik nem értelmezi a page-break-before tulajdonságot flexboxra, így Chrome-ban és Operában is egy hosszú oszlopban jelennek meg az elemek.

Nem fogod tudni megoldani tisztán CSS-sel, vagy JavaScriptet kell írj, vagy szerveroldalon a megfelelő sorrendben kiírni a dobozokat.
15

Ez esetben kérhetnék

alkony4 · 2016. Aug. 17. (Sze), 19.39
Ez esetben kérhetnék alternatív megoldást rá ami nem ütközik hasonló jellegű hibába? Akár js kód akár más?
Előre is köszönöm!
16

Három ciklusban három

Joó Ádám · 2016. Aug. 17. (Sze), 21.32
Három ciklusban három különböző divbe írd ki a megfelelő dobozokat, a diveket pedig helyezd egymás mellé.
17

Szia! Dinamikusan változik a

szobek · 2016. Aug. 19. (P), 17.58
Szia!

Dinamikusan változik a tartalom, vagy fix mérettel kell számolni? Mert ha fix a méret és elhelyezkedés, akkor absolute pozícióval simán megoldható pár sorral.