max-margin-leftのようなもの

締切済

質問者：xindex
質問日時：2008/10/26 18:55
回答数：2件

max-margin-leftというプロパティをCSSに追加したいのですが
いえ、無理なら同じような効果が得られるだけでももちろんokですよ？
やりたいこと
margin:0px auto;のように左右中央にコンテンツを表示する方法がありますが、もうちょっと左よりにしたい！
だけど、margin:0px auto 0px 120px ;にしたらウィンドウ幅が狭まったときも左に120pxもあまっちゃう！もったいない！
左も消費できればいいのに。と。
こんな感じの動作↓
max-margin-left:120px;max-width:600px;margin-right:auto;

同じような動作をするならどんなのでもかまいません。
よろしくお願いします。

マージンを%指定すればいいじゃん→%指定は避けたいです。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

最新から表示
回答順に表示

No.2

回答者： noname#78238
回答日時：2008/11/11 14:15

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>

- 0
- 件

通報する

No.1

回答者： _pipi_
回答日時：2008/10/27 10:08

<!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>