2

問題は以下の通り。タグなどのブロック要素があり、<div>それを中央に配置したいと考えています。設定するだけmargin-left: auto; margin-right:autoで問題は解決します。しかし、たとえば、右マージンを左マージンの 2 倍にするにはどうすればよいでしょうか。

昔は、フレーム付きの HTML4.01 で、中央のフレームの幅を 600px、左のフレームの幅を「1*」、右のフレームの幅を「2*」に設定して、必要なレイアウトを取得できました。では、HTML5 で同じことを行うにはどうすればよいでしょうか。

4

4 に答える 4

0

% 幅を指定することが許容される場合はdiv、非常に簡単です。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<style media="all">

div {width: 40%; height: 600px; background: red; margin-left: 20%; margin-right: 40%;}

</style>

</head>
<body>

<div></div>

</body>
</html>
于 2013-05-24T13:31:45.237 に答える
0

次のようなものを使用できます。

div {
    position: absolute;
    width: 300px; height: 300px;
    top: 50%; left: 50%;
    margin-top: -150px; margin-left: -150px;
    border: 1px solid black 
}

これはあなたが言ったことを一元化し<div>ます。左右の余白を増やしたり減らしたりしたい場合は、margin-left: -150px;値を変更してください。

jsFiddle の例

于 2013-05-24T13:32:11.270 に答える