내 몸에 버튼, 양식, html 문서 및 캔바스를 3 요소로 구성되어 있다. 그리고 내가 원하는 형태를 유지할 수 있고 왼쪽 오른쪽 버튼을 정렬되고 캔바스를 정렬되고. 문제는 내가 처음 두 요소, 그들은 더 이상 준수하십시오 정렬하려면 시도하시겠습니까 않고 서로 서로 옆에 있는 가로?, 내가 지금까지 여기 코드, I want 양식을 준수하십시오 없이 바로 다음 오른쪽 버튼은 사이의 공간에.
<! - begin 스니핏: js 숨기십시오: 거짓값 콘솔: 진정한 바벨. > 거짓값 -;
#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>
끝 - < 스니핏 >;!
Div 모두 포함된 & 양식을 만들 수 있습니다. 그러면 make div 부동 소수점 오른쪽 버튼을 설정하여 'float: 오른쪽, '.
이전 분입니다. 업데이트하려면: 이제, 거의 모든 브라우저에서 작동됨 플렉상자 사용합니다.
<! - begin 스니핏: js 숨기십시오: 거짓값 콘솔: 진정한 바벨. > 거짓값 -;
<div style="display: flex; justify-content: flex-end">
<div>I'm on the right</div>
</div>
끝 - < 스니핏 >;!
그리고 심지어 애호가, 간단히 얻을 수 있습니다.
<! - begin 스니핏: js 숨기십시오: 거짓값 콘솔: 진정한 바벨. > 거짓값 -;
<div style="display: flex; justify-content: space-around">
<div>Left</div>
<div>Right</div>
</div>
끝 - < 스니핏 >;!
및 애호가.
<! - begin 스니핏: js 숨기십시오: 거짓값 콘솔: 진정한 바벨. > 거짓값 -;
<div style="display: flex; justify-content: space-around">
<div>Left</div>
<div>Middle</div>
<div>Right</div>
</div>
끝 - < 스니핏 >;!
이 질문에 대한 대답 float: right '다른' 갈 수 있기 때문에 그리 좋은 외부에서 모피쳐 div (오버플로입니다: 모피쳐 숨겨짐 도움이 될 수 있다) 과 '왼쪽 여백에: 자동차, 마진 오른쪽: # 39, t 를 복잡한 네스트된 작업하십시오 didn& 가져다줄래요 0 ' (I didn& # 39, 왜 t 조사).
참고: css 는 텍스트 정렬 '속성' 에서 부모 블록 요소점 콘텐츠 등 텍스트 맞춰지는지 인라인 방법을 설명합니다. 텍스트 정렬 '만' 자신을 제어하지 맞춤에는 블록 요소를 그들의 인라인 컨텐트입니다.
예:
<div style="display: block; width: 80%; min-width: 400px; background-color: #caa;">
<div style="display: block; width: 100%">
I'm parent
</div>
<div style="display: inline-block; text-align: right; width: 100%">
Caption for parent
</div>
</div>
[Here& s # 39, JS 바이올린] [1].
Do you mean 이렇게?
/embedded/result,js,html,css/">Float: right '와' 특성을 추가할 수 있습니다 ',' 를 모두 형태와 버튼를 선택해제합니다:
이 ',' 와 '< button> < 맞추십시오 세로일 수 있습니다,,' 와 '그들을 감싸 form> 컨테이너입니다 flex 방향선이: 열 '. 소스 요소의 주문하십시오 순서를 적립율은 they& # 39 위에서 아래로 표시되었는지 순서재정리할 저들이요 그래서 나온다.
그런 다음, 가로로 양식 & 맞추십시오. 버튼를 컨테이너입니다 캔바스를 그들을 감싸 컨테이너입니다 flex 방향선이 '와 함께: 행 '. 소스 요소의 주문하십시오 다시 순서를 적립율은 they& # 39, re 시됩니다 왼쪽에서 오른쪽으로 그래서 순서재정리할 저들이요
또한, 이는 모두 분리하십시오 합니다 '' 와 '에서' 스타일 규칙을 링크됨 질문이예요 코드에서 포지셔닝하십시오 float
S # 39, here& 트리밍한 다운되어도 버전의 HTML 로 고데펜 링크됨 명이다.
<div id="mainContainer">
<div>
<canvas></canvas>
</div>
<div id="formContainer">
<div id="addEventForm">
<form></form>
</div>
<div id="button">
<button></button>
</div>
</div>
</div>
다음은 관련 CSS 및
#mainContainer {
display: flex;
flex-direction: row;
}
#formContainer {
display: flex;
flex-direction: column;
}
[2]: http://caniuse.com/ # 검색 = 플렉상자
<div class="pull-right"></div>