내 html 문서의 본문은 3 가지 요소, 단추, 양식 및 캔버스로 구성됩니다. 버튼과 양식을 오른쪽 정렬하고 캔버스를 왼쪽 정렬 상태로 유지하고 싶습니다. 문제는 처음 두 요소를 정렬하려고 할 때 더 이상 서로를 따르지 않고 대신 가로로 옆에 있습니까?, 여기까지 코드가 있습니다. 오른쪽에있는 버튼 바로 다음에 양식을 따르기를 원합니다. 사이에 공간이 없습니다.
#cTask {
background-color: lightgreen;
}
#button {
position: relative;
float: right;
}
#addEventForm {
position: relative;
float: right;
border: 2px solid #003B62;
font-family: verdana;
background-color: #B5CFE0;
padding-left: 10px;
}<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<script type="text/javascript" src="timeline.js"></script>
<link rel="stylesheet" href="master.css" type="text/css" media="screen" />
</head>
<body bgcolor="000" TEXT="FFFFFF">
<div id="button">
<button onclick="showForm()" type="button" id="cTask">
Create Task
</button>
</div>
<div id="addEventForm">
<form>
<p><label>Customer name: <input></label></p>
<p><label>Telephone: <input type=tel></label></p>
<p><label>E-mail address: <input type=email></label></p>
</form>
</div>
<div>
<canvas id="myBoard" width="1000" height="600">
<p>Your browser doesn't support canvas.</p>
</canvas>
</div>
</body>
</html>
margin-left: auto;했지만 그게 효과가 없었기 때문에 오른쪽에 맞추려고하는 요소가 상대적이기 때문에 놀랐습니다.