[
[返信する]]
div要素の真横にdiv要素を置きたい
by 民族
2015-09-07 20:38
先日はお騒がせして申し訳ありませんでした。
今回、どうしても自力で解決に至れず、もう一度質問させていただきます。
・HEAD
(ここにウェブフォントのタグを入れています)
<style type="text/css">
body{font-size:small;}
#aiu{border:#000000 1px solid;
font-size:15px;
line-height:1.4;
width:790px;
margin:3% auto;
padding:10px;}
.kakiku{border:#000000 1px solid;
width:200px;
font-size:30px;
font-family: 'webフォントの名前';
padding:5px 0;
text-align:center;
float:left;
}
.sasisu{width:400px;
height:100px;
margin:auto;
}
</style>
・全体レイアウト
<div id="aiu"><div class="kakiku">Kakiku</div><div class="sasisu">さしすさしすさしすさしすさしすさしすさしすさしすさしすさしすさしすさしす</div>あいうあいうあいうあいうあいうあいうあいうあいうあいうあいうあいうあいうあいうあいうあいうあいう</div>
・#aiuの中に.kakikuと.sasisuを入れ、.sasisuを.kakikuの真横に並べたいです。
・.sasisu要素は横幅を小さ目にとり、左右に横幅を#aiu(の範囲内)と.kakikuの丁度真ん中になるようにしたいです。
・現在、.kakikuと.sasisuの間に余白はなくぴっちりと詰まっている状態で、.kakikuの下に「さしすさしす…」の文字が来ており縦幅はスルーされてしまっています。
これを、縦幅以上になるとスクロールさせるようにしたいのですが、height:100px;ではスクロールはされないのでしょうか？
pc
[編集]
by と
2015-09-07 21:45
.kakikuをフロートさせたなら、.sasisuの左マージンを200px以上取らないと並びませんよ。
あとフロート部分の終わりにclear:leftを指定した要素を入れてください。
「2カラム」でググると参考になるサイトが見つかると思います。
pc
[編集]
by 民族
2015-09-07 22:04
スレ主です、と様お返事ありがとうございます。
・200px開けなくとも現在並んでいる状態です
・clear:left;を.sasisuに入れると横並びになってくれませんでした
・また現在「さしす」と「あいう」の文字が重なってしまっているのですが、それをどうにかしたいです
2カラムについては盲点でした、自分でも色々と調べてみます。
pc
[編集]
by と
2015-09-07 22:45
clear:leftは.sasisuではなく.sasisuの後に来る要素に指定、です。(この辺りも2カラムでくぐれば出てきます)
marginを開けなくても並んでいるのはちょっと理由がわかりませんごめんなさい。
あと書き忘れましたが2カラム等で要素をフロートさせる場合、リセットCSSやDOCTYPE宣言でのブラウザの標準化をお勧めします。ブラウザごとの表示の差でレイアウトが崩れることはよくありますので…。
pc
[編集]
by 民族
2015-09-07 23:09
と様、お返事ありがとうございます。
＞clear:leftは.sasisuではなく.sasisuの後に来る要素に指定
.sasisuの後ろに来る要素が無い場合はどうすれば良いでしょうか？
pc
[編集]
by と
2015-09-07 23:59
.sasisuの後に空要素を作成してclear:leftを指定するか、親要素の#aiuに.clearfixというクラスを追加指定します。こちらも詳しくはくぐった方が良いと思います。「フロート解除」「clearfix」で探してみてください。
pc
[編集]
by uur
2015-09-08 01:34
以下で試してみてください。
【全体レイアウト】
<div id="aiu">
<div class="kakiku">Kakiku</div>
<div class="sasisu"><div>さしす</div></div>
<div class="clear"></div>
あいう
</div>
わかり易くする為改行しています。"改行を<br>に変換する"設定の場合は詰めてください。
【HEAD】
<style type="text/css"><!--
body{
font-size: small ;
}
#aiu{
max-width: 790px ;
margin: 3% auto 0 ;
padding: 10px ;
border: 1px solid #000000 ;
font-size: 15px ;
line-height: 1.4 ;
}
.kakiku{
width: 200px ;
max-width: 50% ;
padding: 5px 0 ;
border: 1px solid #000000 ;
float: left ;
text-align: center ;
font-size: 30px ;
font-family: 'webフォントの名前' ;
}
.sasisu > div{
max-width: 400px ;
max-height: 100px ;
margin: 0 auto ;
padding-left: 5px ;
overflow-y: auto ;
}
.clear{
clear: both ;
}
--></style>
【変更点】
《01》>>#aiu(の範囲内)と.kakikuの丁度真ん中に〜
id="aiu"、class="kakiku"二つのの右(枠)線の中心にclass="sasisu"という事でよろしいでしょうか？
class="sasisu"自体ではなく、class="sasisu"直下のdiv要素を中央寄せすることで解決させました。
スクロールや横幅、高さ等もclass="sasisu"自体ではなくその直下のdiv要素にかかるようにしています。
《02》>>縦幅以上になるとスクロールさせるように〜
overflow-yプロパティを指定する必要があります。
とりあえず(ごく一部ブラウザを除き)超過したらスクロールバーが出現するautoを指定しましたが、「overflow CSS」等で検索し好みの値と置き換えて下さい。
《03》フロート解除
HEADに.clear{中略}
全体レイアウトの"あいう"直前に<div class="clear"></div>
をそれぞれ追加し、class="kakiku"のfloat:left;を解除しています。
《04》横幅調節
スマートフォン閲覧時に横スクロールが出ますので勝手ながら色々弄らせて頂きました。不要と判断されましたら、元に戻すなり値変更なりしてください。
■#aiu、.sasisu→widthをmax-widthに変更
div要素に指定することにより「基本ははみ出さない最大サイズ、親要素の横幅が指定値を上回った場合は指定値固定」となります。
■.kakiku→width:200px;にmax-width:50%;を追加
横幅200pxだと残りスペースを使用するclass="sasisu"が細切れになるブラウザ用に、最大幅を50%に抑えて半分はスペース確保できるよう指定しています。
《05》縦幅調節
.sasisuのheightをmax-heightにしています。
内容が短い場合も100px固定にしたい場合はmax-を削除してください。
《06》class="sasisu"直下のdiv要素にpadding-left:5px;を追加
class="kakiku"の右枠線と"さしす"がぴっちりくっつくのが嫌なのかな？と思い勝手に足しています。正直ごめんなさい。
長々と書きましたが、不明な点や不具合などありましたらすみません。
pc
[編集]
[返信する]
[
戻る
]
[返信する]]
2015-09-07 20:38
pc
戻る
]