Diskuze: 2 články vedle sebe

HTML a CSS HTML a CSS 2 články vedle sebe American English version English version

Avatar
Jakub Klindera:

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. července 15:37
Avatar
Alexej Haman
Člen
Avatar
Alexej Haman:

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  -2 29. července 16:03
Avatar
Oxtimus
Člen
Avatar
Oxtimus:

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. července 16:06
 
Nahoru Odpovědět  +2 29. července 16:04
Avatar
Jakub Rychlý
Redaktor
Avatar
Odpovídá na Jakub Klindera
Jakub Rychlý:

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. července 16:47
Akceptované řešení
+20 Zkušeností
+1 bodů
Řešení problému
Nahoru Odpovědět  -2 29. července 16:45
Čím víc toho vím, tím víc zjišťuju, že vlastně nic nevím.
Avatar
Jakub Rychlý
Redaktor
Avatar
Odpovídá na Alexej Haman
Jakub Rychlý:

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

Nahoru Odpovědět  +1 29. července 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:

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. července 18:12
Avatar
Jakub Rychlý
Redaktor
Avatar
Odpovídá na Jakub Klindera
Jakub Rychlý:

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

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

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. července 18:16
Čím víc toho vím, tím víc zjišťuju, že vlastně nic nevím.
Avatar
Jakub Klindera:

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. července 18:37
Avatar
Jakub Klindera:

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

 
Nahoru Odpovědět 29. července 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.