- 締切済み
max-margin-leftのようなもの
max-margin-leftというプロパティをCSSに追加したいのですが いえ、無理なら同じような効果が得られるだけでももちろんokですよ？ やりたいこと margin:0px auto;のように左右中央にコンテンツを表示する方法がありますが、もうちょっと左よりにしたい！ だけど、margin:0px auto 0px 120px ;にしたらウィンドウ幅が狭まったときも左に120pxもあまっちゃう！もったいない！ 左も消費できればいいのに。と。 こんな感じの動作↓ max-margin-left:120px;max-width:600px;margin-right:auto; 同じような動作をするならどんなのでもかまいません。 よろしくお願いします。 マージンを%指定すればいいじゃん→%指定は避けたいです。
- xindex
- お礼率90% (10/11)
- JavaScript
- 回答数2
- ありがとう数3
- みんなの回答 （2）
- 専門家の回答
みんなの回答
JavaScriptを使って一応出来ましたが、Safari以外のブラウザ(IEは確認していません)ではカクカクした表示になってしまうようです。 <div id="target_div" style="border : 1px red solid; margin : 0 auto; max-width : 600px; height : 100px;"></div> <script type="text/javascript"> // id属性からdivを取得 var targetDiv = document.getElementById("target_div"); // max-widthで指定した値 var targetDivOffsetWidth = 600; // max-margin-leftで指定したい値 var maxMarginLeft = 120; // ウィンドウが読み込まれたとき、またはリサイズされたときのイベント window.onload = window.onresize = function() { if (targetDiv.parentNode.offsetWidth - targetDivOffsetWidth <= 0) { targetDiv.style.margin = "0"; } else if (targetDiv.parentNode.offsetWidth - targetDivOffsetWidth < maxMarginLeft * 2) { targetDiv.style.margin = "auto"; } else { targetDiv.style.marginLeft = maxMarginLeft + "px"; } }; // window.addEventListener(...); </script>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <body> <div style="margin:0px auto;width:660px;"> <div style="width:200px;float:right;"></div> <div style="width:450px;border:1px #f00 solid; float:right"> 筋違いか・・・。 </div> <div style="clear:both"></div> </div>
お礼
回答ありがとうございます。 私もフロートは考えたのですがちょっと違うんですよね・・・。 それからカラム落ちもありますし。 フロートのクッションでカラム落ちする前にmax-width指定(とwidth:100%)でクッションが縮まればいんですが、思うようにいきませんねぇ・・・