Richten Sie <div> -Elemente nebeneinander aus

127

Ich weiß, dass dies eine ziemlich einfache Frage ist, aber ich kann sie für mein Leben nicht herausfinden. Ich habe zwei Links, auf die ich ein Hintergrundbild angewendet habe. So sieht es derzeit aus (Entschuldigung für den Schatten, nur eine grobe Skizze eines Knopfes):

Geben Sie hier die Bildbeschreibung ein

Ich möchte jedoch, dass diese beiden Tasten nebeneinander liegen. Ich kann nicht wirklich herausfinden, was mit der Ausrichtung zu tun ist.

Hier ist der HTML-Code

<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>

Hier ist das 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;
}
css html alignment sudo rm -rf
quelle
5
Das erste, was mir durch das Lesen des Titels float:left;
einfällt,
2
@ JCOC611: Die Bewerbung float:left;für beide divhat es perfekt gemacht. Können Sie Ihren Kommentar als Antwort posten? Vielen Dank!
Sudo RM-
1
Und das zweite ist, display: inline-block;aber es wird weniger gut unterstützt ...
JV
1
float: links in einem Container würde funktionieren, aber ich würde versuchen, zwei <span> -Tags anstelle von <div> s für die Schaltflächen zu verwenden.
Shiftycow
Wie bereits erwähnt, Float hinzufügen: left; Fügen Sie zu #buyButton und #galleryButton ein weiteres Element mit clear hinzu: both; das Schweben zu löschen. Warum divs (Blockelemente) zum Umschließen von <a> verwenden?
Ludesign

Antworten:

154

Auf float:left;beide Divs auftragen, damit sie nebeneinander stehen.

JCOC611
quelle
Irre ich mich oder muss ich clear:both;irgendwo hineingehen? Ich war noch nie der CSS-Kenner, aber es scheint typisch zu sein, wenn ich Floats sehe, um auch Clearings zu sehen.
Brad Christie
4
clear:bothwird genau das Gegenteil tun. "Elemente nach dem schwebenden Element fließen darum herum. Um dies zu vermeiden, verwenden Sie die Eigenschaft clear."
JCOC611
@ JCOC611: Ah, so klar folgt normalerweise, wenn Sie eine momentane Float-Fähigkeit wollen? Macht Sinn. Danke für die Lektion. ;-)
Brad Christie
7
Um "klar" zu sein (schrecklich, ich weiß), müssten Sie verwenden, <br style="clear: both;" />wenn Sie eine dritte Div hätten, die Sie unter den beiden ausgerichteten Div wollten.
Tass
3
@Tass Sie müssen nur Ihre dritte Div wie folgt haben: <div style="clear: both;">...</div>(kein br erforderlich)
intrepidis
136

Vorsicht float: left… 🤔

… Gibt es viele Möglichkeiten, Elemente nebeneinander auszurichten.

Im Folgenden finden Sie die häufigsten Möglichkeiten, um zwei Elemente nebeneinander zu erreichen.

Demo: Alle folgenden Beispiele auf Codepen anzeigen / bearbeiten

Grundstile für alle folgenden Beispiele…

Einige grundlegende CSS-Stile parentund childElemente in diesen Beispielen:

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

float: links

Mit der floatLösung habe ich unbeabsichtigte Auswirkungen auf andere Elemente. (Hinweis: Möglicherweise müssen Sie einen Clearfix verwenden .)

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;
}

Anzeige: 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;
}

Hinweis : Der Abstand zwischen diesen beiden untergeordneten Elementen kann entfernt werden, indem der Abstand zwischen den div-Tags entfernt wird:

Anzeige: Inline-Block (kein Leerzeichen)

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;
}

Anzeige: 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;
}

Anzeige: 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;
}

Anzeige: Gitter

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
}
Beau Smith
quelle
2
Ja, aber ich habe gehört, dass die Verwendung inline-blockeinige Kompatibilitätsprobleme hat. Gibt es auch einen Vorteil gegenüber der Verwendung float?
Sudo rm -rf
1
Ja, inline-blockist neuer, daher unterstützen Ihre Zielbrowser dies möglicherweise noch nicht (obwohl es viele browserspezifische Eigenschaften und auch Problemumgehungen dafür gibt). Der Vorteil ist, dass das enthaltende Element die Elemente umschließt. mit müssen floatSie CSS zum übergeordneten Element hinzufügen.
Beau Smith
12

halte es einfach

<div align="center">
<div style="display: inline-block"> <img src="img1.png"> </div>
<div style="display: inline-block"> <img src="img2.png"> </div>
</div>
Miguel Rão Vieira
quelle