Avatar
Michal Kuba
Redaktor
Avatar
Michal Kuba:

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:

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:

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

Nahoru Odpovědět  +1 3.12.2015 17:34
Když nevíš jak dál, podá ti ruku někdo, od koho by jsi to nečekal. A tu šanci musíš přijmout!
Avatar
Tonda Kozák
Člen
Avatar
Odpovídá na IT Man
Tonda Kozák:

Kromě nedostatečné podpory.

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

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:

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
Když nevíš jak dál, podá ti ruku někdo, od koho by jsi to nečekal. A tu šanci musíš přijmout!
Avatar
Michal Vašíček
Tým ITnetwork
Avatar
Odpovídá na Tonda Kozák
Michal Vašíček:

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:

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:

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:

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:

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:

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:

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.