wordpress ヘッダー画像　横に並べる方法

解決済

質問者：Sorara2013
質問日時：2014/06/09 17:35
回答数：2件

テーマはStinger3を使っています。

ヘッダー画像を二つ横に並べたいのですが縦になってしまいます。(header2がheader１の上に来ます。）

#header1 {
height: auto;

margin-left: auto;
margin-right: auto;
width: 700px;

padding: 0 0 0 290px;
}

#header2 {
height: auto;
margin-left: auto;
margin-right: auto;
width: 251px;

}
floatを使えば横に並べることはできたのですが、
ウィンドウサイズを小さくした時にレイアウトが崩れるので他の良い方法はないでしょうか？

理想としては左側にheader2右側にheader1間に10pxの余白、ウィンドウサイズを小さくした時に、header1とheader2が左方向に移動していく（右から左に向かって小さくした場合）

どうすればいいでしょうか？　教えてください。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

No.1

回答者： ONEONE
回答日時：2014/06/10 00:23

inline-blockでうまくいかないでしょうか？

http://taneppa.net/display-inline-block/

- 0
- 件

通報する

この回答へのお礼

わかりました、ありがとうございますｍ(_ _ )ｍ

通報する

お礼日時：2014/06/10 20:33

No.2ベストアンサー

回答者： ORUKA1951
回答日時：2014/06/10 08:19

header1,header2とは分からないidですが・・

『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』
　勧告(1999)後15年になるのに理解されなくて、HTML5では、この反省からDIVは極力使わないで構造を明確にする新しい要素が追加されました。( http://standards.mitsue.co.jp/resources/w3c/TR/h … )
　ここをしっかり理解しておかないとデザインをちょっと変えたいとき困りますし、HTMLのメンテナンスも大変になる。

・#header1,header2は、本当のところなんでしょう。見出しなら、<h1></h1>で良いです。
　「テキストを画像に置き換えて表現する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」はちょっとまずいので、実際の内容はなんなのでしょう。
・横に並べる方法は、inline-block、でもinlineでもcontent:url()でも、もちろんfloatでも構いません。内容によって選択します。
・ディスプレイの最大幅、最小幅の想定は？
・画像はウィンドウ幅に合わせて伸縮させるのか？
　<----余白---->[-----画像-----]10px[--画像--]<----余白---->
　[--像-]10px[画像]
・それとも画像は伸縮させずに余白で制御するのか
　<----余白---->[---画像---]10px[画像]<----余白---->
　　　　<余白>[---画像---]10px[画像]<余白>
　HTMLさえ、きちんとマークアップされていれば、いかようにも出来ます。
例えば、標準的な
<body>
　<div class="header">
　　<h1>ページタイトル</h1>
以下省略・・・
　だけで良いのですよ。それで画像を２枚並べられる。