나는 이것이 다소 간단한 질문이라는 것을 알고 있지만 내 삶을 위해 그것을 이해할 수는 없습니다. 배경 이미지를 적용한 두 개의 링크가 있습니다. 현재 모습은 다음과 같습니다 (그림자에 대한 사과, 버튼의 대략적인 스케치).

그러나 저는이 두 버튼을 나란히 놓고 싶습니다. 정렬로 무엇을해야하는지 정말 알 수 없습니다.

다음은 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>

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

float:left;두 div 모두에 적용 하여 나란히 세워야합니다.

조심 float: left ... 🤔

… 요소를 나란히 정렬하는 방법에는 여러 가지가 있습니다.

다음은 두 가지 요소를 나란히 배치하는 가장 일반적인 방법입니다.

데모 : Codepen에서 아래의 모든 예제보기 / 편집

아래의 모든 예에 대한 기본 스타일…

다음 예제의 parent및 child요소에 대한 몇 가지 기본 CSS 스타일 :

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

float솔루션을 사용하여 다른 요소에 의도하지 않은 영향을 미쳤습니다. (힌트 : clearfix 를 사용해야 할 수도 있습니다.)

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

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

참고 : div 태그 사이의 공백을 제거하여이 두 하위 요소 사이의 공백을 제거 할 수 있습니다.

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

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

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

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
}

간단하게

<div align="center">
<div style="display: inline-block"> <img src="img1.png"> </div>
<div style="display: inline-block"> <img src="img2.png"> </div>
</div>