작은 웹 모듈 용 인터페이스에서 작업 중이며 CSS에 몇 가지 문제가 있습니다. 지금은 하위 섹션을 레이아웃하기 위해 컨테이너 DIV와 테이블을 가지고 있습니다. 나는 지금까지 탁월한 성과를 거둔 테이블 3 개를 떠 다니고 있습니다.CSS에서 2 열 레이아웃 만들기
필자는 최근에 추가 필드를 사용자가 필요에 따라 추가 할 수있는 기능을 추가했으며 오른쪽 열의 테이블 높이가 커지면 레이아웃이 깨집니다. 레이아웃을 깨뜨리지 않도록 더 나은 방법이 있나요? 추가 한 후
에 3 개 떴다 왼쪽 테이블을 이동 한 후 ... 다음과 같이 나타납니다, 각 테이블에
를 : "바로 명확한"및 "명확한 왼쪽" 코드의 맨 위에있는 "float : right/clear : right"를 다른 3 개에서 제거하면이 경우를 제외하고는 잘 작동합니다.
각 플로트가 왼쪽 일 때 clear : left를 추가하고 오른쪽 플로트마다 clear : right를 추가하십시오.
각 플로팅 컨테이너의 순서에 따라 달라집니다. 또 다른 옵션은 한 열에서 한 세트의 플로트 (예 : 부동 소수점 왼쪽 또는 부동 소수점 권한)를 유지하고 다른 열의 다른 항목에서 float 속성을 제거하여 플로팅 된 상자의 측면으로 감싸는 것입니다.
편집 : 작업 예제 : http://cssdesk.com/Xan5j
이의 라이브 예,하지만이-경우 처리 할 수있는 가장 쉬운 방법이이 자사의 자체 사업부의 각 열을 포장 옵션을-입니다 보여 좋을 것이다.
불행하게도 그것이 관리자 측 모듈 그리고 그것은 코드를 추출하여 독립하기 위해 꽤 많은 시간이 걸릴 것입니다. 그러나 컨테이너 div의 내부에서 두 개의 DIV를 수행하려고했는데 테이블을 떠 다니기보다는 각각의 DIV에 3을 넣었지만 작동하지 않았습니다. 나는 뭔가 잘못 했어. 그래서 나는 그 다른 발사를 줄 것이다! –
좋습니다, 행운을 빈다. 스크린 샷을 보면 첫 번째 이미지에서 결과를 얻으려는 것에 흥미가 있습니다. 상자가 그냥 떠 다니는거야? –
코드가 상당히 길기 때문에 http://pastie.org/7942588에서 나에게 당신을위한 pastie를 붙였습니다. 이후 나는 "clear : left/right"라인을 다른 답변에서 제안 된 바와 같이 추가했지만 제거 된 것들과 함께 어떻게 처음에 설정했는지입니다. –
맑음 추가 : 왼쪽/오른쪽으로 향상되었지만 이상하게 생겼습니다. 그것은 지금 각각의 열에 테이블을 유지하지만 일정한 양의 새로운 필드를 추가 한 후 제출 버튼이 이동하고 다른 테이블 자체가 이상하게 표시됩니다 (예 : "할당 된 인벤토리"옆에 IPMI/DRAC 자격 증명 표시). 초기 질문에 새 스크린 샷을 게시했습니다. 답장을받지 못하면 24 시간 후에 답변으로 받아 들일 것입니다. –
블록을 출력하는 순서를 제어 할 수 있습니까? 나는 그들이 현재 출력 된 순서가 'device'- 'network'- 'configured'- 'idmi'임을 알 수있다. 'configured'블록이 오른쪽으로 부각 되었기 때문에, 다음 float left는 자동으로 그것을 지운다. 순서를 바꿀 수 있으면 먼저 왼쪽 열 블록을 모두 출력하고 왼쪽으로 떠서 오른쪽 열 블록의 float 속성을 제거하면 오른쪽에있는 공간을 채울 것입니다 ... – crdunst
나는 제안대로 3 먼저 테이블을 떠난 다음 3 개의 오른쪽 테이블을 추가하고 플로트/클리어 속성을 제거했습니다. 올바른 것으로 보입니다 (두 열 사이의 간격은 float : 오른쪽 제거로 인해 없어졌습니다).그래도 4 개 이상의 필드를 추가하면 오른쪽의 내용이 상당히 길어지고 왼쪽에있는 내용이 아직 채워지지 않으므로 "RDP/SSH 자격 증명"이 왼쪽으로 점프됩니다. 이것은 실제적으로는 훨씬 우수하지만 이렇게하면 매우 이상한 차이를 만듭니다 (첫 번째 게시물에 새 스크린 샷이 추가됨). –