NOVINKA! E-learningové kurzy umělé inteligence. Nyní AI za nejlepší ceny. Zjisti více:
NOVINKA – Víkendový online kurz Software tester, který tě posune dál. Zjisti, jak na to!
Avatar
Michal Kuba
Tvůrce
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
Neaktivní uživatel
Člen
Avatar
Odpovídá na Michal Kuba
Neaktivní uživatel: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
Neaktivní uživatelský účet
Avatar
Jan Lupčík
Tvůrce
Avatar
Odpovídá na Michal Kuba
Jan Lupčík:3.12.2015 17:34

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

Nahoru Odpovědět
3.12.2015 17:34
TruckersMP vývojář
Avatar
Tonda Kozák
Člen
Avatar
Odpovídá na Jan Lupčík
Tonda Kozák:3.12.2015 19:00

Kromě nedostatečné podpory.

 
Nahoru Odpovědět
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
Jan Lupčík
Tvůrce
Avatar
Odpovídá na Tonda Kozák
Jan Lupčík: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
3.12.2015 19:08
TruckersMP vývojář
Avatar

Člen
Avatar
Odpovídá na Tonda Kozák
: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
Avatar
Tonda Kozák
Člen
Avatar
Odpovídá na Jan Lupčík
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
3.12.2015 19:17
Avatar
Tomáš123
Člen
Avatar
Odpovídá na Jan Lupčík
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 Jan Lupčík
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
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
Michael Škrášek
Tvůrce
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
"I choose a lazy person to do a hard job. Because that person will find an easy way to do it. " Bill Gates
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.