V tomto článku probereme každý ze zmíněných přístupů jeden po druhém a uvedeme vhodný příklad každé metody.
Takže, pojďme začít!
Metoda 1: Umístěte dva prvky Div vedle sebe do CSS pomocí mřížky
CSS' mřížka ” rozvržení umožňuje uživateli umístit dva nebo více dvou divů vedle sebe. Mřížka je v zásadě hodnotou vlastnosti zobrazení, která se používá k vytvoření rozvržení sestávajícího z řádků a sloupců.
Syntax
Syntaxe vlastnosti display s rozložením mřížky je uvedena níže:
displej: mřížka
Nyní se podívejme na příklad související s umístěním dvou divů vedle sebe v CSS pomocí rozložení mřížky.
Příklad
Zde vytvoříme dva podřízené divy uvnitř rodičovského divu s názvy tříd jako „ rodič “, “ dítě ' a ' dítě “:
< div třída = 'rodič' >< div třída = 'dítě' < / div >
< div třída = 'dítě' < / div >
< / div >
Dále v sekci CSS použijte „ .rodič ” pro přístup k nadřazenému div a nastavení hodnoty vlastnosti display jako “ mřížka “. Dále nastavte zlomek pomocí „ mřížka-šablona-sloupce ” pro vytvoření prostoru pro sloupce. V našem případě nastavíme zlomky jako „ 1fr ' a ' 1fr “, což znamená, že oba divy získaly stejný prostor. Dále nastavíme mezeru mezi dvěma sloupci pomocí vlastnosti column-gap a nastavíme její hodnotu jako „ 25 pixelů “.
CSS:
.rodič {Zobrazit : mřížka ;
mřížka-šablona-sloupce : 1fr 1fr ;
sloupec-mezera : 25 pixelů ;
}
V dalším kroku použijeme „ .dítě ” pro přístup k oběma podřízeným divům a nastavení výšky divů jako ' 250 pixelů “ a nastavte barvu pozadí jako „ rgb(253, 5, 109) “:
.dítě {výška : 250 pixelů ;
Pozadí : rgb ( 253 , 5 , 109 ) ;
}
To ukáže následující výsledek:
Přejděme k jiné metodě umístění div vedle sebe
Metoda 2: Umístěte dva prvky Div vedle sebe do CSS pomocí flex
' flex ” je hodnota vlastnosti display, která umožňuje umístit dva divy vedle sebe. Tato vlastnost se používá k nastavení flexibilní délky pro flexibilní položku. Zmenší nebo zvětší ohebný předmět, aby se vešel do kontejneru.
Syntax
Syntaxe vlastnosti display s flex je uvedena níže:
displej: flex;Pojďme k příkladu, abychom pochopili uvedený koncept.
Příklad
Zvážíme stejný soubor HTML a použijeme „ flex “ do nadřazeného kontejneru. Zde nastavíme hodnotu vlastnosti display jako flex a nastavíme mezeru mezi podřízenými divy jako „ 10 pixelů “:
.rodič {Zobrazit : flex ;
mezera : 10 pixelů ;
}
Poté nastavte šířku, výšku a barvu pozadí div jako „ 650 pixelů “, “ 200 pixelů ', a “rgb(0; 255; 42) “, respektive:
.dítě {šířka : 650 pixelů ;
výška : 200 pixelů ;
Pozadí : rgb ( 0 , 255 , 42 ) ;
}
Výsledek daného kódu je uveden níže:
Metoda 3: Umístěte dva prvky Div vedle sebe do CSS pomocí float
Vlastnost CSS float určuje plovoucí směr prvku. Konkrétněji lze tuto vlastnost využít pro umístění dvou divů vedle sebe v CSS.
Syntax
Syntaxe vlastnosti float je:
plovoucí: žádný|levý|pravýZde je popis výše uvedených hodnot:
- žádný: Používá se k omezení plovoucí.
- vlevo, odjet: Používá se k plavení prvků na levé straně.
- že jo: Používá se k plavení prvků na pravé straně.
Přejděme k příkladu umístění div vedle sebe.
Příklad
Nyní vytvoříme dva divy uvnitř tagu
a přiřadíme název třídy jako „ div1 ' a ' div2 “: < tělo >< div třída = 'div1' < / div >
< div třída = 'div2' < / div >
< / tělo >
Poté použijte „ .div1 ' a ' .div2 ” pro přístup ke kontejnerům přidaným v sekci HTML. Budeme používat oba divy ve stejné třídě, protože vlastnosti a hodnoty, které se chystáme přiřadit oběma, jsou stejné.
Dále přiřadíme hodnotu vlastnosti float jako „ vlevo, odjet “ a nastavte šířku a výšku prvku div jako „ padesáti% ' a ' 40 % “. Použijeme také vlastnost box-sizing a nastavíme její hodnotu jako „ border-box “. Dále nastavte barvu pozadí div jako „ rgb(7, 255, 222) “ a nastavte hodnoty vlastnosti border jako „ 3px “, “ pevný ', a ' rgb(255, 0, 255) “:
.div1 , .div2 {plovák : vlevo, odjet ;
šířka : padesáti% ;
výška : 40 % ;
box-size : border-box ;
Pozadí : rgb ( 7 , 255 , 222 ) ;
okraj : 3px pevný rgb ( 255 , 0 , 255 ) ;
}
Poznámka: Můžete umístit dva prvky div vedle sebe, aniž byste použili vlastnost box-sizing a vlastnost border nastavením různých barev pozadí prvků div.
Jakmile implementujete výše uvedený kód, spustí se soubor HTML a zobrazí se výsledek:
Poznámka: Chcete-li vytvořit mezeru mezi dvěma divy, nejprve vytvořte další div a poté podle toho nastavte okraj divu.
Závěr
Divs lze umístit vedle sebe pomocí tří různých metod CSS, které jsou „ flex ' a ' mřížka ” hodnoty vlastnosti display a “ plovák ' vlastnictví. Každá z metod funguje efektivně; můžete však použít kteroukoli z nich podle našich požadavků. V této příručce jsme probrali tři způsoby umístění div vedle sebe pomocí CSS a poskytli související příklady.