Wyrównaj elementy <div> obok siebie


127

Wiem, że to dość proste pytanie, ale nie mogę tego rozgryźć za całe życie. Mam dwa łącza, do których zastosowałem obraz tła. Oto jak to wygląda obecnie (przepraszam za cień, tylko szkic przycisku):

wprowadź opis obrazu tutaj

Jednak chcę, aby te dwa przyciski były obok siebie. Naprawdę nie wiem, co należy zrobić z wyrównaniem.

Oto kod HTML

<div id="dB"}>
    <a href="http://notareallink.com" title="Download" id="buyButton">Download</a> 
</div>
<div id="gB">
    <a href="#" title="Gallery" onclick="$j('#galleryDiv').toggle('slow');return false;" id="galleryButton">Gallery</a>     
</div>

Oto CSS

#buyButton {
    background: url("assets/buy.png") 0 0 no-repeat;
    display:block;
    height:80px;
    width:232px;
     text-indent:-9999px;
}
#buyButton:hover{
width: 232px;
height: 80px;
background-position: -232px 0;
}
#buyButton:active {
width: 232px;
height: 80px;
background-position: -464px 0;
}

#galleryButton {
    background: url("images/galleryButton.png") 0 0 no-repeat;
    display:block;
    height:80px;
    width:230px;
     text-indent:-9999px;
}
#galleryButton:hover{
width: 230px;
height: 80px;
background-position: -230px 0;
}
#galleryButton:active {
width: 230px;
height: 80px;
background-position: -460px 0;
}

5
Pierwsze, co przychodzi na myśl po przeczytaniu tytułu, tofloat:left;
JCOC611

2
@ JCOC611: Zastosowanie float:left;do obu divwykonało to doskonale. Czy możesz zamieścić swój komentarz jako odpowiedź? Dzięki!
sudo rm -rf

1
A druga jest, display: inline-block;ale jest mniej obsługiwana ...
JV

1
float: left wewnątrz kontenera działałoby, ale spróbuję użyć dwóch tagów <span> zamiast <div> s dla przycisków.
shiftycow

Jak już wspomniano, dodanie float: left; do #buyButton i #galleryButton, a następnie dodaj kolejny element z clear: both; aby wyczyścić pływające. Po co używać div (elementów blokowych) do zawijania <a>?
ludesign

Odpowiedzi:


154

Zastosuj float:left;do obu swoich elementów div, aby stały obok siebie.


Czy się mylę, czy clear:both;muszę gdzieś tam wejść? Nigdy nie byłem uczony CSS, ale wydaje mi się typowy, gdy widzę elementy pływające, aby zobaczyć również czyste.
Brad Christie,

4
clear:bothzrobi dokładnie odwrotnie. „Elementy za elementem pływającym będą go otaczać. Aby tego uniknąć, użyj właściwości clear”.
JCOC611

@ JCOC611: Ach, więc jasne zwykle następuje, gdy chcesz chwilową zdolność unoszenia się? Ma sens. Dzięki za lekcję. ;-)
Brad Christie

7
Żeby było „jasne” (okropne, wiem), musiałbyś użyć <br style="clear: both;" />, gdybyś miał trzeci div, który chciałeś, pod dwoma, które były wyrównane.
Tass

3
@Tass, potrzebujesz tylko trzeciego div w ten sposób: <div style="clear: both;">...</div>(nie wymaga br)
intrepidis

136

Uważaj float: left… 🤔

… Istnieje wiele sposobów wyrównywania elementów obok siebie.

Poniżej znajdują się najczęstsze sposoby osiągnięcia dwóch elementów obok siebie…

Demo: Wyświetl / edytuj wszystkie poniższe przykłady w Codepen


Podstawowe style dla wszystkich poniższych przykładów…

Niektóre podstawowe style CSS dla elementów parenti childw tych przykładach:

.parent {
  background: mediumpurple;
  padding: 1rem;
}
.child {
  border: 1px solid indigo;
  padding: 1rem;
}

float: left

Użycie floatrozwiązania może w niezamierzony sposób wpłynąć na inne elementy. (Wskazówka: może być konieczne użycie poprawki przezroczystej ).

html

<div class='parent'>
  <div class='child float-left-child'>A</div>
  <div class='child float-left-child'>B</div>
</div>

css

.float-left-child {
  float: left;
}

wyświetlacz: inline-block

html

<div class='parent'>
  <div class='child inline-block-child'>A</div>
  <div class='child inline-block-child'>B</div>
</div>

css

.inline-block-child {
  display: inline-block;
}

Uwaga : odstęp między tymi dwoma elementami podrzędnymi można usunąć, usuwając odstęp między znacznikami DIV:

wyświetlacz: inline-block (bez spacji)

html

<div class='parent'>
  <div class='child inline-block-child'>A</div><div class='child inline-block-child'>B</div>
</div>

css

.inline-block-child {
  display: inline-block;
}

wyświetlacz: flex

html

<div class='parent flex-parent'>
  <div class='child flex-child'>A</div>
  <div class='child flex-child'>B</div>
</div>

css

.flex-parent {
  display: flex;
}
.flex-child {
  flex: 1;
}

wyświetlacz: inline-flex

html

<div class='parent inline-flex-parent'>
  <div class='child'>A</div>
  <div class='child'>B</div>
</div>

css

.inline-flex-parent {
  display: inline-flex;
}

wyświetlacz: siatka

html

<div class='parent grid-parent'>
  <div class='child'>A</div>
  <div class='child'>B</div>
</div>

css

.grid-parent {
  display: grid;
  grid-template-columns: 1fr 1fr
}


2
Tak, ale słyszałem, że używanie inline-blockma pewne problemy ze zgodnością. Poza tym jakąś przewagę nad używaniem tego float?
sudo rm -rf

1
Tak, inline-blockjest nowszy, więc Twoje przeglądarki targe mogą go jeszcze nie obsługiwać (chociaż istnieje wiele właściwości specyficznych dla przeglądarki, a także obejścia tego problemu). Zaletą jest to, że element zawierający zawinie elementy; z floatbędziesz musiał dodać css do elementu nadrzędnego.
Beau Smith,

12

nie komplikuj

<div align="center">
<div style="display: inline-block"> <img src="img1.png"> </div>
<div style="display: inline-block"> <img src="img2.png"> </div>
</div>
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.