web-dev-qa-db-ja.com

<div>要素を横に並べる

これはかなり単純な質問であることは知っていますが、私の人生ではそれを理解できません。背景画像を適用した2つのリンクがあります。現在の外観は次のとおりです（シャドウの謝罪、ボタンの大まかなスケッチ）。

enter image description here

ただし、これらの2つのボタンを並べて配置する必要があります。アライメントで何をする必要があるのか​​、本当にわかりません。

これが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;
}
csshtmlalignment
96
sudo rm -rf

float:left;を両方のdivに適用すると、それらが並んで立つようになります。

131
JCOC611

float: left…に注意してください????

…要素を並べて配置する方法はたくさんあります。

以下は、2つの要素を並べて実現する最も一般的な方法です…

デモ： Codepenの以下のすべての例を表示/編集

以下のすべての例の基本スタイル…

これらの例のparentおよびchild要素の基本的なcssスタイル：

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

float:left

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

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

注：divタグ間のスペースを削除することにより、これら2つの子要素間のスペースを削除できます。

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

display:grid

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
}
92
Beau Smith

複雑にしないでおく

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