Frage Richten Sie
-Elemente nebeneinander aus


Ich weiß, dass das eine ziemlich einfache Frage ist, aber ich kann es 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 Buttons):

enter image description here

Ich möchte jedoch, dass diese beiden Tasten nebeneinander stehen. Ich kann nicht wirklich herausfinden, was mit der Ausrichtung getan werden muss.

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

75
2018-02-08 21:32


Ursprung


Antworten:


Sich bewerben float:left; zu beiden DIVs sollten sie Seite an Seite stehen.


118
2018-02-08 21:41



In acht nehmen float: left...

... gibt es viele Möglichkeiten, Elemente nebeneinander auszurichten.

Unten sind die gebräuchlichsten Wege um zwei Elemente nebeneinander zu erreichen ...

Demo: Sehen / bearbeiten Sie alle folgenden Beispiele auf Codepen


Grundlegende Stile für alle Beispiele unten ...

Einige grundlegende CSS-Stile für parent und child Elemente in diesen Beispielen:

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

float:left

Verwendung der float Lösung meine unbeabsichtigte Wirkung auf andere Elemente haben. (Tipp: Möglicherweise müssen Sie ein Klarfix.)

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

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

display:inline-block (no space)

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

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

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


48
2018-02-09 02:29



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>

3
2018-02-21 21:22