Diskuze: Poskládání divů

HTML a CSS HTML a CSS Poskládání divů American English version English version

Aktivity (1)
Avatar
Michal Kuba
Redaktor
Avatar
Michal Kuba:3.12.2015 16:02

Ahoj.
Zasekl jsem se na prkotině, nemůžu přijít na klíčový atribut.
Vysvětlím, co potřebuji, na základě přiloženého obrázku:
Dole jsou dvě řady po čtyřech boxech se zaoblenými rohy. Teď jsou nalepeny na sebe a já potřebuji, aby se rozmístily na takovou šířku, jaké jé jinak červený box nad tím.

Zde kus kodu:

<div class="row">
               <div class="col-md-2">
                   <div class="boxik">

                   </div>
               </div>
              ..
              ..
           </div>
           <div class="row">
               <div class="col-md-2">
                   <div class="boxik">

                   </div>
               </div>
              ..
              ..
           </div>

A CSS:

.row{
    width:860px;
}

/* !!!!! BOXIK !!!!!! */
.row .col-md-2{
    width:200px;
}
.row .col-md-2 .boxik{
    width:200px;
    height:250px;
    background-color: #BE2823;
    border-radius: 20px;
    margin-top: 20px;
}

Možná to bude nějaká kombinace display a něčeho, ale nic z toho, co jsem kdy potřeboval a použil, nefunguje.

Díky :)

 
Odpovědět 3.12.2015 16:02
Avatar
David Hanina
Člen
Avatar
Odpovídá na Michal Kuba
David Hanina:3.12.2015 17:08

Ahoj, nějak jsem nepochopil k čemu tolik tříd, možná je to jen proto, že nevím co máš zalubem :-) ale mělo by stačit přidat

float: left;
margin-left: 20px;

Doufám, že jsem správně pochopil tvoji otázku

 
Nahoru Odpovědět 3.12.2015 17:08
Avatar
IT Man
Redaktor
Avatar
Odpovídá na Michal Kuba
IT Man:3.12.2015 17:34

Mrkni se na flexbox, ten vyřeší tvůj problém. :)

Nahoru Odpovědět  +1 3.12.2015 17:34
Usmívej se, zítra už tvůj kód nemusí fungovat!
Avatar
Tonda Kozák
Člen
Avatar
Odpovídá na IT Man
Tonda Kozák:3.12.2015 19:00

Kromě nedostatečné podpory.

 
Nahoru Odpovědět  ±0 3.12.2015 19:00
Avatar
Tonda Kozák
Člen
Avatar
Tonda Kozák:3.12.2015 19:00

Vypočítej si, jaká tam má být mezera a nastav správný margin.

 
Nahoru Odpovědět 3.12.2015 19:00
Avatar
IT Man
Redaktor
Avatar
Odpovídá na Tonda Kozák
IT Man:3.12.2015 19:08

Takže kvůli těm uživatelům, kteří si nechtějí aktualizovat prohlížeč, nebudeme používat nové technologie?

Nahoru Odpovědět  +1 3.12.2015 19:08
Usmívej se, zítra už tvůj kód nemusí fungovat!
Avatar
Michal Vašíček
Tým ITnetwork
Avatar
Odpovídá na Tonda Kozák
Michal Vašíček:3.12.2015 19:11

Nedostatečná podpora je blbost uživatelů, ne vývojářů. Navíc, jediný, kdo ho nepodporuje v poslední verzi je IE. ;)

Nahoru Odpovědět 3.12.2015 19:11
Příspěvek může obsahovat stopy arašídů, sarkasmu a sóji.
Avatar
Tonda Kozák
Člen
Avatar
Odpovídá na IT Man
Tonda Kozák:3.12.2015 19:17

Jo, do té doby, než jich bude tak málo, jako třeba teď uživatelů s IE6.

Vybodneme se na uživatele, kteří neumějí/nechtě­jí/nemohou vyměnit prohlížeč, protože bude náš kód o pár řádků kratší? Někdo možná jo, já ne.

Nehodlám tu rozpoutávat diskusní válku. Chci jen upozornit na problém. Jak s ním každý naloží, je věc každého jedince.

 
Nahoru Odpovědět  -2 3.12.2015 19:17
Avatar
Tomáš123
Člen
Avatar
Odpovídá na IT Man
Tomáš123:9.12.2015 20:09

Ja by som povedal, že ich nebudeme využívať len kvôli blbosti vývojárov. Na každú otázku čo sa týka boxov odpovedáš neúplnou nič nehovoriacou skupinou slov. A totiž flexbox. Keď si o ňom spracoval všetko čo sa dalo, mohol by si svojou odpoveďou aspoň prispieť k vyriešeniu nejakým odkazom.

Nahoru Odpovědět 9.12.2015 20:09
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
Tomáš123
Člen
Avatar
Odpovídá na IT Man
Tomáš123:9.12.2015 20:12

Teda, aby som doplnil, vo väčšine takto základných prípadov existuje aj všeobecne funkčné riešenie nevyžadujúce žiadne alebo menšie kompromisy.

Nahoru Odpovědět 9.12.2015 20:12
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
Tomáš123
Člen
Avatar
Odpovídá na Michal Vašíček
Tomáš123:9.12.2015 20:14

Alečo, podpora v najnovších dvoch verziách už je (nekompletná neznamená žiadna).

Nahoru Odpovědět 9.12.2015 20:14
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
Tomáš123
Člen
Avatar
Odpovídá na Michal Kuba
Tomáš123:9.12.2015 20:16

Použi display: table. Rieši responzivitu a pokojne aj percentuálne rozmery so zachovaním pomerov veľkosti boxov a prvkov. Pre riadkové usporiadanie pridaj prvkom, ktoré je potrebné umiestniť do riadku display: table-cell. Nadradenému elementu display: table.

Nahoru Odpovědět 9.12.2015 20:16
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
Odpovídá na Michal Kuba
Michael Škrášek:9.12.2015 21:23

Taky jsem nepochopil co cheš, má to být nějak tak? https://ctrlv.cz/Nu15
pokud jo stačí použít procenta:
HTML:

<div class="row">
            <div class="boxik">0</div>
        </div>
        <div class="row">
            <div class="boxik">0</div>
            <div class="boxik">1</div>
            <div class="boxik">2</div>
            <div class="boxik">3</div>
</div>

CSS:

.row{
    width: 860px;
    float: left;
    background: yellow;
}

.row .boxik{
        float: left;

    margin-left: 0.5%;
    margin-right: 0.5%;

    height: 250px;
    width:24%;

    background-color: #BE2823;

    border-radius: 20px;
    margin-top: 20px;
}

ale záleží kolik jich chceš mít vedle sebe, psal jsi po čtyřech boxech ....

Editováno 9.12.2015 21:26
Nahoru Odpovědět 9.12.2015 21:23
Proč to dělat složitě, když to jde jednoduše.
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 13 zpráv z 13.