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

CSSで、
一つのdivの中に、二つのdivがあるとき、
二つのdivの片方を310px;で指定して、
もう片方を、画面サイズにあわせて可変するようにするにはどうしたらよいですか?

310pxで指定したところは、内容などがはみ出さないようにしたいです。(つまり、二つの内容同士がはみ出さないようにして欲しいです。)


CSSのソースはこちらです。

div#content{
width: 100%;
}

div#1{
float: left;
}

div#2{
width: 310px;
float: right;
}

HTMLは、上記の通り、一つのdivに二つのdivが入っている状態になっています。

<div id=”content”>

<div id=”afl1”>

</div>

<div id=”web1”>

</div>

</div>

●質問者: kabin
●カテゴリ:コンピュータ
✍キーワード:CSS HTML ソース 画面サイズ
○ 状態 :キャンセル
└ 回答数 : 3/3件

▽最新の回答へ

1 ● stnet

http://www.hatena.ne.jp/1136094147

人力検索はてな - CSSで、 一つのdivの中に、二つのdivがあるとき、 二つのdivの片方を310px;で指定して、 もう片方を、画面サイズにあわせて可変するようにするにはどうしたらよいですか? ..

div#1{

float:left;

position:absolute;

padding-right:310px;

}


div#1を上記にすれば、WindowsのIE、Firefox、OperaではOKです

◎質問者からの返答

回答ありがとうございます。

しかし、これだと

内容があふれた場合に、

よこにあふれてしまいます。

できれば、横ではなく、縦に自動的に改行されるようなものにしたいのです。


2 ● izayoimizuki

http://izayoi.nm.land.to/

十六夜

CSS:

div#content{width:100%;}

div#web1{width:310px;float:right;}


HTML:

<div id=”content”>

<div id=”web1”>

test

</div>

<div id=”afl1”>

test

</div>

</div>

でしょうか。

これで左側が可変で310pxが収まらなくなれば縦に並ぶようになっています。

ただ#afl1と#web1の順番が逆転してしまいますが・・・


3 ● dreamily

http://www.yahoo.co.jp/

Yahoo! JAPAN

class属性にしてみてはいかがでしょう?


【CSSのソース】


div.content{

width: 100%;

}


div.afl1{

float: left;

width: 100%;

}


div.web2{

width: 310px;

float: right;

}


【HTMLタグ】


<div class=”content”>


<div class=”afl1”>

</div>


<div class=”web2”>

</div>


</div>

◎質問者からの返答

これらの方法がすべて、私の意図するものではなかった上に、これ以上回答があつまりそうにないので、キャンセルします。

関連質問


●質問をもっと探す●



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