CSS 可変マージン

画像のように、マージンを可変する方法はありますか？
宜しくお願いします。

No.1 回答者： ORUKA1951 回答日時： 2014/02/28 14:30

text-align:justifyも使えないかと。

工夫すれば、もっと良い方法があるかも
HTMLは下記と変更なし
　CSS ２カラムの可変( http://oshiete.goo.ne.jp/qa/8492850.html )
HTMLさえちゃんと書かれていたらなんとかはなる。
<style type="text/css">
<!--
html,body{margin:0;padding:0;}
div.header,div.section,div.footer{
width:90%;min-width:470px;max-width:1000px;
margin:0 auto;padding:5px;
}
div.section{position:relative;}
div.section div.nav{
position:absolute;
left:0;/* ★位置 */
top:0;
width:60%;/* ★幅 */
border:solid green 1px;
}
div.section h2,
div.section p,
div.section div.section{
width:auto;/* ★width:auto;*/
min-width:0;margin:0 0 0 61%;/* ★左右のマージン */
line-height:1.6em;background-color:white;
border:solid 1px green;
}
div.section div.nav ol{width:100%;position:relative;list-style:none;text-align:center;
}
div.section div.nav ol,div.section div.nav ol li{
margin:0;padding:0;
}
div.section div.nav ol li{
border:solid 1px gray;
display:block;
position:absolute;
top:0;
left:5%;/* right:64%;*/
width:100px;
}
div.section div.nav ol li+li{width:90px;position:relative;left:10px;display:inline-block;}
div.section div.nav ol li+li+li{position:absolute;width:70px;right:5%;left:auto;/* left:74%; */}

div.section div.section p{margin:0;}
div.section div.section{min-height:200px;}

div.section div.nav ol:after{
content:"←可変→\A";white-space:pre;
position:absolute;
bottom:-2em;
}
div.section div.nav{background-color:white;}
div.section div.nav li{background-color:yellow;}
body{background-color:gray;}
div.header{background-color:aqua;}
div.section{border:solid 1px green;padding:3px;}
div.footer{background-color:yellow;}

-->
</style>

この回答へのお礼

ORUKA1951 様

お礼が遅くなり申し訳ありません。
拝見しましたが、私の説明不足で
内容が伝わってなかったようです。

この質問は閉じさせていただきます。
ありがとうございました。

お礼日時：2014/03/04 10:35