人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

html、CSS の質問です。
以下の条件すべてを満たすレイアウトを実現させたいです。

1:2カラムレイアウト
2:左は固定 width:200px、右側はリキッド
3:右側部分のコンテンツとして、<div style="float: left; width: 100; height: 100;">内容</div> が10数個ある。
4:上記内容をセンタリングして表示

実現できれば、ウィンドウ枠を広げるとリキッドの部分が広がり、内容がそれに伴って並べられ、更に、2カラムの両端の余白が均等になると思います。
html と CSS のみで教えてください。

●質問者: AKI-NAMI
●カテゴリ:ウェブ制作
✍キーワード:CSS HTML ウィンドウ カラム コンテンツ
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● stnet
●100ポイント

リキッドレイアウトで両端余白ってのがどういう意図か良く判らないですが

こんな感じの解釈であってますかね?

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<title></title>
<style>
* {margin:0;padding:0;}
#wrap {width:85%;margin:0 auto;}
#main {float:right;width:100%;margin:0 0 0 -200px;background:#efe;}
#main #inner {margin:0 0 0 200px;}
#main #inner .box {float:left;width:100px;height:100px;border:solid 1px #000;}
#side {float:right;width:200px;background:#eef;}
</style>
</head>
<body>
<div id="wrap">
<div id="main"><div id="inner">
<div class="box">内容</div>
<div class="box">内容</div>
<div class="box">内容</div>
<div class="box">内容</div>
<div class="box">内容</div>
<div class="box">内容</div>
<div class="box">内容</div>
<div class="box">内容</div>
<div class="box">内容</div>
<div class="box">内容</div>
<div class="box">内容</div>
</div></div><!-- /main -->
<div id="side">
<p>サイド<br>
サイド<br>
サイド<br>
サイド<br>
サイド<br>
サイド<br>
サイド<br>
サイド<br>
サイド<br>
サイド<br>
サイド<br>
サイド<br>
サイド<br>
サイド<br>
サイド<br>
サイド</p>
</div>
</div>
</body>
</html>
◎質問者からの返答

実はhttp://coban.me/というサイトでどうしてもセンタリングできないと言われ、考えていたのですが、現在見るとちゃんとセンタリングされています。

どこをどのように直したのか不明なので、上記が正解なのかどうかわかりません。

いつまでも放置というわけにもいかないので、これで回答を閉めます。

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ