![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
2段組で左右2つの段落の頭を揃えたいのですが、上手く行きません。
floatを利用して2段組のレイアウトを作っています。
(親)
.main__inner:after {
clear : both;
content : "";
display : block;
}
(子)
.main__inner--left {
float : left;
width : 47%;
}
(子)
.main__inner--right {
float : right;
width : 47%;
}
右側の段落のはじめの部分を左側のタイトル<h3>に高さを揃えるたいのですが、右段落の上に空間を入れる方法が分かりません。
「<br><br><br><br>」とすれば表面上体裁は整います。
でも、本来あるべき文法ではないのでこの方法はあまり使いたくありません。
ちなみに右段落も<h3>で始まる場合は<h3>にクラスを作ってCSSで
調整すれば上手く行くのですが<p>だとそのやりかたが反映されないのです。
(CSS)
.space-top--4em {
margin-top:4em;
}
よろしくお願い致します。
No.1ベストアンサー
- 回答日時:
.main__inner--left h3{margin:0; padding:0; height:36px; line-height:36px;}
.main__inner--right { padding-top:36px;
float : right;
width : 47%;
}
上記の数値(例で 36px にして合わせているだけですので)を変更しながら、微調整しましょう。
高さの計算できますか??
margin padding height の合計値で合わせるだけです。
hxやpには、元々のデフォルト値もあるので、全て0でリセットすればわかりやすいかも。
marginとpaddingは必ず利用するので、完璧に覚えた方が良いです。
組み合わせ次第で、複数の方法が頭に浮かんでくる(応用できる)ようになるので、ベストな方法が選択できるようになります。
CSSが重複しないように、詳細度(優先度)がありますので、
他で優先していれば、CSSが効かない場合もあります。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・ゆるやかでぃべーと タイムマシンを破壊すべきか。
- ・「I love you」 をかっこよく翻訳してみてください
- ・歩いた自慢大会
- ・許せない心理テスト
- ・字面がカッコいい英単語
- ・昔のあなたへのアドバイス
- ・かっこよく答えてください!!
- ・あなたが好きな本屋さんを教えてください
- ・スタッフと宿泊客が全員斜め上を行くホテルのレビュー
- ・【大喜利】【投稿~8/27】 こんなガソリンスタンド二度と来るか!なぜそう思った?
- ・これ何て呼びますか Part2
- ・人生で一番思い出に残ってる靴
- ・【お題】動物のキャッチフレーズ
- ・【お題】甲子園での思い出の残し方
- ・ゆるやかでぃべーと すべての高校生はアルバイトをするべきだ。
- ・「それ、メッセージ花火でわざわざ伝えること?」
- ・自分用のお土産
- ・人生で一番お金がなかったとき
- ・一番好きなみそ汁の具材は?
- ・泣きながら食べたご飯の思い出
- ・ちょっと先の未来クイズ第1問
- ・ゴリラ向け動画サイト「ウホウホ動画」にありがちなこと
- ・初めて自分の家と他人の家が違う、と意識した時
- ・単二電池
- ・チョコミントアイス
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
CSS、width100%でもできる余白
-
画像イメージの上下左右、欲し...
-
<div>と<div>の間の10px程の...
-
【CSS】ヘッダーの高さが不明の...
-
ギザギザボーダーの向きを下向...
-
<hr>要素を点線で表示した場合...
-
divで囲まれたpaddingの指定を...
-
CSSで背景画像を一番下にもって...
-
border-style:solidで文字がずれる
-
firefoxでmargin-topが効かない
-
css&html テキストの前に三角...
-
dl,dt,ddタグでdtに対して、row...
-
テーブルのセル間に余白が空い...
-
CSSのposition値の上書き(打消...
-
form input テキストを上下中央...
-
ウェブページの上下に暗幕を表...
-
余分な縦スクロールバーが出て...
-
cssで「下よせ」ってどうやって...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
画像イメージの上下左右、欲し...
-
css初心者 フレックスボックス...
-
form input テキストを上下中央...
-
CSSでボックスのheightが0になる
-
CSS、width100%でもできる余白
-
CSSがなぜかfont-sizeだけ効か...
-
footer を横幅いっぱいに広げる...
-
CSS:animation開始位置の設定
-
【CSS】ヘッダーの高さが不明の...
-
CSSで背景画像を一番下にもって...
-
W3Cのソースコードの検証サービ...
-
表示倍率を変えるとレイアウト...
-
<div>と<div>の間の10px程の...
-
HTMLのiframeの入れ子について
-
余分な縦スクロールバーが出て...
-
HTMLで一部だけスクロールする...
-
【HTML&CSS】フッター下部の余...
-
Media Queries 4 で 非推奨とな...
おすすめ情報