CSS の配置
CSS 水平方向の配置 (水平方向の配置)
CSS には、要素の水平方向の配置のためのプロパティがいくつかあります。
ブロック要素の配置
ブロック要素は、全幅を占め、改行で囲まれた要素です。ブロック要素の例：
- ＆lt; h1＆gt;
- ＆lt; p＆gt;
- ＆lt; div＆gt;レイアウト。
ブロック要素は、左右のマージンを「自動」配置に設定できます。 margin 屬性は、左と右のマージン設定に任意に分割でき、自動的に指定されます。結果は要素が中央に配置されます:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
.center
{
margin:auto;
width:70%;
background-color:#b0e0e6;
}
</style>
</head>
<body>
<div class="center">
<p>人心靈的傷痛若無知己來撫慰，便會荒蕪;人的歡樂若知己來共享，再多的快樂也是悲傷。知己之于人，本是必不可缺。一個人的痛苦要找人傾訴，一個人的愁緒要有人來排解。人若沒有知己，心靈便是一片怎樣的荒涼。 青春都是如此，帶著疼痛，卻又義無反顧。世上本無事，庸人自擾之。人生在世，總是有些空城舊事，年華未央;總是有些季節(jié)，一季花涼，滿地憂傷。許多事，看開了，便會峰回路轉;許多夢，看淡了，便會云開日出。學會思索，學會珍藏，微笑領悟，默默堅強。</p>
</body>
</html>ヒント: 幅が 100% の場合、配置はありません。の効果。 プログラムを?qū)g行して試してみましょうposition屬性を使用して左右の配置を設定します
要素を配置する方法の1つは、絶対配置を使用することです:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
.right
{
position:absolute;
right:0px;
width:300px;
background-color: #4ce667;
}
</style>
</head>
<body>
<div class="right">
<p>人心靈的傷痛若無知己來撫慰，便會荒蕪;人的歡樂若知己來共享，再多的快樂也是悲傷。知己之于人，本是必不可缺。一個人的痛苦要找人傾訴，一個人的愁緒要有人來排解。人若沒有知己，心靈便是一片怎樣的荒涼。 青春都是如此，帶著疼痛，卻又義無反顧。世上本無事，庸人自擾之。人生在世，總是有些空城舊事，年華未央;總是有些季節(jié)，一季花涼，滿地憂傷。許多事，看開了，便會峰回路轉;許多夢，看淡了，便會云開日出。學會思索，學會珍藏，微笑領悟，默默堅強。</p>
</div>
</body>
</html>注: 絶対配置ドキュメント フローとは何の関係もないため、ページ上の他の要素をオーバーレイできます。
プログラムを?qū)g行して試してください
float 屬性を使用して左右の配置を設定します
float 屬性を使用することは、要素を配置する方法の 1 つです:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
.right
{
float:right;
width:300px;
background-color:#b0e0e6;
}
</style>
</head>
<body>
<div class="right">
<p>人心靈的傷痛若無知己來撫慰，便會荒蕪;人的歡樂若知己來共享，再多的快樂也是悲傷。知己之于人，本是必不可缺。一個人的痛苦要找人傾訴，一個人的愁緒要有人來排解。人若沒有知己，心靈便是一片怎樣的荒涼。 青春都是如此，帶著疼痛，卻又義無反顧。世上本無事，庸人自擾之。人生在世，總是有些空城舊事，年華未央;總是有些季節(jié)，一季花涼，滿地憂傷。許多事，看開了，便會峰回路轉;許多夢，看淡了，便會云開日出。學會思索，學會珍藏，微笑領悟，默默堅強。</p>
</div>
</body>
</html>プログラムを?qū)g行して試してください
