メッセージの編集
お名前
本文
以下で試してみてください。 【全体レイアウト】 <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"の右枠線と"さしす"がぴっちりくっつくのが嫌なのかな?と思い勝手に足しています。正直ごめんなさい。 長々と書きましたが、不明な点や不具合などありましたらすみません。
編集パス
編集
記事削除
- ナノ -