div 블록으로 스타일 지정

스타일을 반복 할 때 요소의 수에 관계없이 양식의 모양이 정당하도록 한 줄 (왼쪽에서 오른쪽으로 화면)이 있습니다 (2 ~ 5 개 요소)div 블록으로 스타일 지정

다음 렌더링 된 HTML을 검사 할 때 div 태그가 서로 겹치는 이유는 무엇입니까?

<div class="grid_7 "> 
    <div class="grid_2"> 
     <asp:TextBox ID="TextBoxFirstName" runat="server" Text='<%# Bind("F1FirstName")%>'></asp:TextBox> 
    </div> 
    <div class="push_1 grid_2 float-left "> 
     <asp:Label Text="Last Name: " ID="LastName" runat="server" /> 
    </div> 
    <div class="grid_3 float-left"> 
     <asp:TextBox ID="TextBoxLastName" runat="server" Text='<%# Bind("F2LastName")%>' /> 
    </div> 
</div>

[EDIT]`.float 왼쪽 { 플로트 : 왼쪽; }

. 플로트 - 오른쪽 { float : right; }은`

.container_12, .container_16 { padding: 0 10px 0 10px; margin-left: auto; margin-right: auto; width: 960px; height: auto; }

.grid_12 { display: inline; float: left; margin-left: 0px; margin-right: 0px; }

모든

.container_12 .push_1 { left: 80px; } 마스터 페이지 내에서 해당 컨테이너 내에서 "container_12"와 "grid_12"에 싸여있다. 그리드는 컨테이너 내에서 균등하게 이격 된 부분이므로이 코드는 포함하지 않겠습니다. 푸시/당기기는 div의 오른쪽 움직임과 왼쪽에있는 "position : relative"스타일로 정의됩니다. float-left 스타일은 이러한 div를 수동으로 정렬하고 단순히 "float-left"속성을 할당하려는 시도였습니다. 필요합니다.

출처

2011-05-02 sammarcow

전체 코드가 무엇을하고 있는지 모르겠지만, 당신의 고정 폭 + 패딩 함께 할 수있는 뭔가가 직감하지 않습니다. – robx

스타일 시트에서 적용 가능한 모든 스타일을 제공해야합니다.

예 : grid_7, grid_2, grid_3, push_1 등

출처

2011-05-02 19:11:35

편집을 참조하십시오. – sammarcow

"그리드가 컨테이너 내에 고르게 이격 된 부분이므로이 코드는 포함하지 않겠습니다." div의 위치를 수정 해 주실 것을 요청하는 경우 해당 div에 적용 할 CSS 규칙을 모두 제공하지 않는 것입니다. 어떻게 할 수 있니? 자신을 더 잘 설명해야합니다. –

div 블록으로 스타일 지정

답변

관련 문제