17

10月 12

 

総widthの真ん中に1カラム、もう一カラムを右端に配置する方法

Html

ちょっと前に題名の事を実現する方法を考えてみたんだけど、一発で実現する方法はないように思う。(あれば教えて欲しい)
つまり、下記画像の様な配置だ。

floatプロパティを用いた場合、片方の要素を真ん中に固定という事が出来ないのだ。
また、テーブルタグを用いた場合においてもfloatプロパティに同じく、微調整の計算が必要になってくる。

と言う事で、あまり簡潔な解決方法ではないのだが、以下のコードによって実現できたのでメモ。

#footer .copyright{
	margin:0 auto 0 auto;
	text-align:center;
	display:box;
}
#footer a{
	margin-top:-35px;
	margin-right:40px;
	text-align:left;
	float:right;
}
		<div id="footer">
			<div class=".copyright"><h5>copyright(c) WisdomTrees.net <?php echo date(Y) ?> All Rights Reserved.</h5></div>
			<a href="#">TOPページに戻る</a>
		</div><!-- end footer -->

図にするとこんな感じ。

display:blockプロパティによって.copyrightクラスはブロック要素になる。
するとaタグは改行されるので次行に配置される。これをfloat:rightによって右側に寄せたものを
margin-top:-35px;を指定する事によって35px分上に持ち上げて配置している。

これ以上に簡潔な方法があれば、コメント欄にお寄せいただきたい。




No comments yet, be the first.

コメントを残す