ホームページ > 記事 > ウェブフロントエンド > CSSで物を右に移動する方法
CSSで物を右に移動する方法
- 醉折花枝作酒筹オリジナル
- 2021-06-02 10:34:2122176ブラウズ
右に移動する方法: 1. margin-left を使用して div を右に移動します。必要なのは、次のボックスに「margin-left: value」スタイルを設定することだけです。2. margin-right を使用して、 div を右に移動し、「margin-right: value」スタイルを前のボックスに設定するだけです。
このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。
div オブジェクト ボックスは右にオフセットされています。css を使用して div を右に特定の距離だけ移動します - div を右に移動するチュートリアルの例。
div は次のようにオフセットされます。一定の距離だけ右側に配置することもできますが、マージンを使用することもできますし、パディングを使用して実装することもでき、状況に応じて柔軟に選択することができます。ここで thinkcss は、右に移動するためのさまざまな CSS レイアウト div メソッドを紹介します。
前者は青の div で、後者は赤の div です。この場合、赤の div を右にフローティングしてオフセットする柔軟な方法があります。チュートリアルは以下の通りです。
基本的な手順:
例をわかりやすくするために、2 つのボックスを並べて配置し、両方の div に float スタイルを設定し、同じ幅と高さを設定します。 2 つの div ボックスを同時に操作します。
1. margin-left を設定して div を右に移動します
境界線または背景色がある場合
両方の div が float:left レイアウト左 CSS に設定されますスタイルでは、2 番目 (赤) の div をもう少し右に移動するには、通常、2 番目 (後の赤) div に margin-left を設定します。
div を少し右に移動するように設定する前のコード:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>div向右移一定距离实例</title>
<style>
.box-a,
.box-b {
width: 200px;
height: 100px;
float: left;
}
.box-a {
border: 1px solid #00f;
}
.box-b {
border: 1px solid #f00;
}
</style>
</head>
<body>
<div class="box-a">第一个（前者）div</div>
<div class="box-b">第二个（后者）div</div>
</body>
</html>2 番目の div の左外側の距離スタイルを設定する操作
Key CSS コード:
.box-a,
.box-b {
width: 200px;
height: 100px;
float: left;
}
.box-a {
border: 1px solid #00f;
}
.box-b {
border: 1px solid #f00;
margin-left: 20px;
}スクリーンショット
2. margin-right を使用して、2 番目の div の右側に一定の距離を置きます
手順
前の方法は、右に移動するdivのmargin-leftを左に一定距離だけ直接設定し、div自体を右に移動する方法です。
margin-right を使用すると、右に移動する div を設定することはできませんが、代わりに、前者 (青い div) を設定して、赤い div を右に一定距離移動することができます。
CSS コード:
.box-a,
.box-b {
width: 200px;
height: 100px;
float: left;
}
.box-a {
border: 1px solid #00f;
margin-right: 20px;
}
.box-b {
border: 1px solid #f00;
}スクリーンショット:
青い div の右外側のマージンを使用して赤色を作成します自然 青い div からの一定の距離に基づいて div を右に移動します
推奨学習: css ビデオ チュートリアル
以上がCSSで物を右に移動する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。