<div>要素を並べて配置する


127

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

ここに画像の説明を入力してください

ただし、これらの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;
}

5
タイトルを読むだけで最初に頭に浮かぶのはfloat:left;
JCOC611

2
@ JCOC611:float:left;両方divのsに適用すると、完全に成功しました。コメントを回答として投稿できますか?ありがとう!
sudo rm -rf 2011

1
第二はあるdisplay: inline-block;...しかし、それはあまりよくサポートしています
JV

1
コンテナー内のfloat:leftは機能しますが、ボタンには<div>ではなく2つの<span>タグを使用してみます。
shiftycow

すでに述べたように、float:leftを追加します。#buyButtonと#galleryButtonに、clear:both;の別の要素を追加します。フローティングをクリアします。div(ブロック要素)を使用して<a>をラップする理由
ludesign

回答:


154

float:left;両方のdivに適用すると、並べて表示されます。


私は間違っていますか、またはclear:both;どこかにそこに行く必要がありますか?私はCSSの専門家ではありませんでしたが、山車を見てクリアを見るのも典型的なようです。
ブラッドクリスティー

4
clear:bothまったく逆になります。「浮動要素の後の要素はその周りを流れます。これを回避するには、clearプロパティを使用してください。」
JCOC611、2011

@ JCOC611:ああ、一瞬のフロート能力が欲しいときにクリアは通常続きますか?理にかなっています。レッスンをありがとう。;-)
ブラッドクリスティー

7
「明確」(恐ろしい、私は知っています)にするために<br style="clear: both;" />、整列した2つの下に必要な3番目のdivがある場合に使用する必要があります。
Tass

3
@Tassには、次のような3番目のdivのみが<div style="clear: both;">...</div>必要です:(brは不要)
intrepidis

136

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

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

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

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


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

これらの例の要素parentchild要素の基本的な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;
}

表示:インラインブロック

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

:これらの2つの子要素間のスペースは、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
}


2
ええ、でも使用にinline-blockは互換性の問題があると聞きました。また、それを使用する利点はありfloatますか?
sudo rm -rf 2011

1
はい、inline-block新しいので、ターゲットブラウザはまだそれをサポートしていない可能性があります(ただし、多くのブラウザ固有のプロパティとこの回避策があります)。利点は、包含要素が要素をラップすることです。でfloat、あなたは親要素にCSSを追加する必要があります。
Beau Smith、

12

単純にする

<div align="center">
<div style="display: inline-block"> <img src="img1.png"> </div>
<div style="display: inline-block"> <img src="img2.png"> </div>
</div>
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.