CSS에서 항목을 오른쪽으로 이동하는 방법-CSS 튜토리얼-php.cn

CSS에서 항목을 오른쪽으로 이동하는 방법

醉折花枝作酒筹

풀어 주다： 2023-01-06 11:16:08

원래의

22242명이 탐색했습니다.

오른쪽으로 이동하는 방법: 1. div를 오른쪽으로 이동하려면 margin-left를 사용하세요. "margin-left: value" 스타일을 다음 상자로 설정하세요. 2. margin-right를 사용하여 div를 오른쪽으로 이동하세요. set 이전 상자에 대해 "margin-right: value" 스타일을 설정하기만 하면 됩니다.

CSS에서 항목을 오른쪽으로 이동하는 방법

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

div 개체 상자가 오른쪽으로 오프셋되도록 설정합니다. CSS를 사용하여 div를 특정 거리만큼 오른쪽으로 이동합니다. div를 오른쪽으로 이동하는 튜토리얼 예

div가 특정 거리만큼 오른쪽으로 오프셋됩니다. 이를 달성하기 위해 여백이나 패딩을 사용할 수 있으며, 상황에 따라 유연하게 선택하는 방법에 따라 다릅니다. 여기서 thinkcss는 오른쪽으로 이동하기 위한 다양한 CSS 레이아웃 div 메소드를 소개합니다.

CSS에서 항목을 오른쪽으로 이동하는 방법

전자는 blue div이고 후자는 red div입니다. 이 경우 red div를 오른쪽으로 유연하게 플로팅하고 일정 거리만큼 오프셋하는 방법에 대한 튜토리얼은 다음과 같습니다.

기본 지침:

예제의 편의를 위해 두 개의 상자가 나란히 있고 두 div를 모두 플로트 스타일로 설정했으며 두 개의 div 상자는 동시에 동일한 너비와 높이를 설정했습니다.

1. div를 오른쪽으로 이동하려면 margin-left를 설정하세요

테두리나 배경색이 있는 경우

두 div 모두 왼쪽에 CSS 스타일이 있는 float:left 레이아웃으로 설정되어 있고 두 번째(빨간색) div는 오른쪽으로 이동해야 합니다. 일반적으로 두 번째(후자의 빨간색) div에 왼쪽 여백을 설정하는 것입니다.

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>

로그인 후 복사

두 번째 div의 왼쪽 외부 거리 스타일을 설정하는 작업

주요 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;
      }

로그인 후 복사

Screenshot

CSS에서 항목을 오른쪽으로 이동하는 방법

두 번째, margin- 사용 오른쪽으로 두 번째 div를 만들려면 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;
      }

로그인 후 복사

스크린샷:

CSS에서 항목을 오른쪽으로 이동하는 방법