전략 : 여기

Question

내가이 nifty site에서 수정 된 일부 코드 :

http://jsfiddle.net/Ajhka/

나는이 체크 박스 이미지와 스타일의 모든 요소 ... 글꼴, 색상 등

레이아웃을 수행하는 방법을 모르겠습니다. 나는 전략이 없다. 하지만 내가 원하는 것은 바이올린과 약간 다릅니다.

제목과 내용 텍스트를 그대로 정렬하고 싶지만 제목이 확인란과 같은 높이에있는 확인란의 오른쪽에 배치했습니다. 이것은 가장 이해하기 쉽고 가장 읽기 쉽습니다.

어떻게 이렇게 가겠어요?

Answer 1

여기 내 버전입니다.

<form id="privacy"> 
    <div> 
     <input type="radio" id="radio1" name="rdo"> 
     <label for="radio1"></label> 
     <span class="privacy_title">Normal</span> 
     <span class="privacy_content">When you add a bookmarks it is posted to the feed. You have a public page which can be viewed by non-members.</span> 
    </div> 
    <div> 
     <input type="radio" id="radio2" name="rdo"> 
     <label for="radio2"></label> 
     <span class="privacy_title">Private</span> 
     <span class="privacy_content">The bookmarks you add are not posted to the feed. You do not have a public page.</span> 
    </div> 
    <div> 
     <input type="radio" id="radio3" name="rdo"> 
     <label for="radio3"></label> 
     <span class="privacy_title">Secret</span> 
     <span class="privacy_content">Same as private and all of your data is encrypted using NSA approved algorithms.</span> 
    </div> 
</form> 

내가 <span> 대한 <p> 태그를 교환이 레이아웃을 얻으려면. 그런 다음 각 세트의 라디오/제목/텍스트를 <div>에 묶었습니다. 당신이 선택한 경우 CSS와 간격을 약간 조정할 수 있습니다.

Answer 2

내가

http://jsfiddle.net/Ajhka/2/

이처럼 보이는 작업 예제로 바이올린을 업데이트 한 당신을 위해 무엇을 찾고있는 사람입니다. 첫 번째 행은 확인란 옆의 머리글과 그 아래에 설명이 있습니다.

나머지 두 개는 확인란 옆에있는 텍스트입니다. 다른 모든 행을 예제 행 1로 만들려면 <div style="clear: both"></div> 행을 위로 이동하십시오.

설명 텍스트를 헤더 텍스트와 맞추려면. <p> 요소에 margin-left을 사용하여 정렬하거나 모두 <table>에 넣으십시오. - 단지 HTML 나는 전혀 CSS를 변경하지 않은 http://jsfiddle.net/Ajhka/5/

: