NOVINKA - Online rekvalifikační kurz Java programátor. Oblíbená a studenty ověřená rekvalifikace - nyní i online.
NOVINKA – Víkendový online kurz Software tester, který tě posune dál. Zjisti, jak na to!
Avatar
Jakub Klindera
Člen
Avatar
Jakub Klindera:29.7.2016 15:37

Zdravím,

poradil by mi prosím někdo, jak udělat, aby se mi na jedné stránce zobrazili 2 články? Vždy se mi zobrazí pod sebou a nevím, jak udělat, aby byly vedle sebe (jestli to tedy jde)

Například:

<article>
<section>
<p> test</p>
</section>
</article>

A druhý článek:

<article>
<section>
<p> test 2</p>
</section>
</article>

Teď se mi to zobrazí pod sebou, ale já to chci vedle sebe.

Přikládám i CSS

article section {
        width: 666px;
        float: left;
        background: white;
        border: 2px solid #006797;
        box-shadow: 9px 9px 9px #1c2228;
        padding: 25px 25px;
}

article {
        padding: 40px 270px;
}

Samozřejmě že vím, že tento CSS je pro oba zárověň. Ale nevím, jak to udělat, aby se mi ty dva články zobrazili vedle sebe.

Děkuji

Nevím, jestli mě chápete jak to myslím. Kdyžtak napiště a zkusím to popsat trochu lépe.

Děkuji

 
Odpovědět
29.7.2016 15:37
Avatar
Alexej Haman
Člen
Avatar
Alexej Haman:29.7.2016 16:03

Ahoj, vyřešil jsem to takhle:
<article>
<section>
<p> test</p>
</section>
<section>
<p> test 2</p>
</section>
</article>

article section {
width: 600px;
float: left;
background: white;
border: 2px solid #006797;
box-shadow: 9px 9px 9px #1c2228;
padding: 25px 25px;
}
U width 666px; mi to už nešlo, pravděpodobně moc široké.
Section by měl mít max 960px, aby byl dobře zobrazen na všech možných rozlišeních. Alespoň myslím, nejsem profík. :)

 
Nahoru Odpovědět
29.7.2016 16:03
Avatar
Michal
Člen
Avatar
Michal:29.7.2016 16:04

Trváš na přítomnosti těch <section>? Jde to jednoduše i bez nich.

HTML:

<article>
    <h1>První článek</h1>
    <p>Text prvního článku...</p>
</article>
<article>
    <h2>Druhý článek</h2>
    <p>Text druhého článku...</p>
</article>

CSS:

article {
    float: left;
    width: 50%;
}
Editováno 29.7.2016 16:06
 
Nahoru Odpovědět
29.7.2016 16:04
Avatar
Jakub Rychlý
Člen
Avatar
Odpovídá na Jakub Klindera
Jakub Rychlý:29.7.2016 16:45

Já bych to vyřešil takto:
HTML:

<div class="prvni">
    <h1>První článek</h1>
    <p>Text prvního článku...</p>
</div>
<div class="druhy">
    <h2>Druhý článek</h2>
    <p>Text druhého článku...</p>
</div>

CSS:

.prvni {
  float: left;
  width: 50%;
}

.druhy {
  float: right;
  width: 50%;
}

Já osobně používám framework Boostrap, který tvz. "Gridy", které dělají tohle vlastně sami.

Editováno 29.7.2016 16:47
Akceptované řešení
+20 Zkušeností
+2,50 Kč
Řešení problému
Nahoru Odpovědět
29.7.2016 16:45
Čím víc toho vím, tím víc zjišťuju, že vlastně nic nevím.
Avatar
Jakub Rychlý
Člen
Avatar
Odpovídá na Alexej Haman
Jakub Rychlý:29.7.2016 16:55

Nevím, jak by tohle mohlo být vedle sebe? Oba ty "články" jsou pod sebou nikoli vedle sebe.

Nahoru Odpovědět
29.7.2016 16:55
Čím víc toho vím, tím víc zjišťuju, že vlastně nic nevím.
Avatar
Alexej Haman
Člen
Avatar
Odpovídá na Jakub Rychlý
Alexej Haman:29.7.2016 18:12

Bez problému mi to funguje. Pokud tobě ne, zkus to oddálit. I u těch 666px co chtěl to funguje, jen to musíš ještě víc oddálit, není to pro každé rozlišení. Pokud dáš width 50% bude to mít pod sebou, protože má ještě border 2px. Pokusím se přidat i obrázek. Uznávám že mé řešení je velmi krkolomné, neresponzivní a není to přesně to, co požadoval.

 
Nahoru Odpovědět
29.7.2016 18:12
Avatar
Jakub Rychlý
Člen
Avatar
Odpovídá na Jakub Klindera
Jakub Rychlý:29.7.2016 18:14

Ještě přikládám živou ukázku https://jsfiddle.net/82xtLmtr/2/

Editováno 29.7.2016 18:14
Nahoru Odpovědět
29.7.2016 18:14
Čím víc toho vím, tím víc zjišťuju, že vlastně nic nevím.
Avatar
Jakub Rychlý
Člen
Avatar
Odpovídá na Alexej Haman
Jakub Rychlý:29.7.2016 18:16

Tak to ano, já jsem přehlédl ten border a snažil jsem se to udělat responsivní. Tvé řešení je samozřejmě také správně, ale já jsem se snažil to udělat co "nejmoderněji"

Nahoru Odpovědět
29.7.2016 18:16
Čím víc toho vím, tím víc zjišťuju, že vlastně nic nevím.
Avatar
Jakub Klindera
Člen
Avatar
Jakub Klindera:29.7.2016 18:37

Ono se to posune na stranu, ale stále to není ve stejné výšce :/

Děkuji všem, co se zde vyjádřili :)

 
Nahoru Odpovědět
29.7.2016 18:37
Avatar
Jakub Klindera
Člen
Avatar
Jakub Klindera:29.7.2016 18:48

Tak už mi to funguje :) Děkuji všem :)
Jakub Rychlý, máš +karma

 
Nahoru Odpovědět
29.7.2016 18:48
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 10 zpráv z 10.