div에 세 요소를 배치

내 문제는 끝에 제공된 샘플 코드에 설명되어 있습니다. 기본적으로 왼쪽에 몇 가지 도구가 들어있는 div 컨테이너와 중간에있는 주요 콘텐츠 및 오른쪽에있는 몇 가지 도구가 있습니다 (시각적 왼쪽 도구는 끌기를 제공하고 시각적 오른쪽 도구는 내용을 삭제하는 것입니다). 왼쪽 및 오른쪽으로 각각 플로팅으로 포지셔닝을 달성했습니다. 그러나 주 콘텐츠에 배경색을 넣으면 왼쪽에 떠 다니지만 오른쪽으로는 채색되지 않습니다. (현재 파이어 폭스 3.5에서만 테스트되었습니다)div에 세 요소를 배치

아래 코드 :

<head> 
    <style type="text/css"> 
    #container{ 
     width:500; 
    } 
    .handle{ 
     float:left; 
    } 
    .delete{ 
     float:right; 
    } 
    .main{ 
     width:450; 
     background-color:ccc; 
    } 
    </style> 
</head> 
<div id="container"> 
<div class="c"><p class="handle">HH</p><p class="delete">X</p><p class="main">Some text here asdf asdf asdf asdf asdf asd fasd fsa dfsa df asdf sadf sa dfa sdf sadf asd fsa df sadf asdf asdf asd fas df asdf as asd fasd fas dfa sdf asdf as dfas df dasf asd fas df asdf asdf asd fasd fasdf asdf asdf asdf as df asdf asdf asd fas df asdpf asdf asdf asd fas dfa sdf asdf asd fas df</p></div> 

<div class="c"><p class="handle">HH</p><p class="delete">X</p><p class="main">Some text here asdf asdf asdf asdf asdf asd fasd fsa dfsa df asdf sadf sa dfa sdf sadf asd fsa df sadf asdf asdf asd fas df asdf as </p></div> 
</div>

출처

2009-08-23 FurtiveFelon

스타일에'* {border : solid 1px black} '을 추가하면 어떻게되는지보십시오. – voyager

난 당신이

<style type="text/css"> 
*{border:solid 1px black} 
#container{ 
    width:500px; 
} 
.handle{ 
    float:left; 
} 
.delete{ 
    position:relative; 
    right:50px; 
    float:right; 
} 
.main{ 
    width:390px; 
    padding:9px 30px; 
    background-color:ccc; 
} 
</style>

으로 원하는하지만 좋은 거리가 멀다 것을 얻을 수 있습니다.

출처

2009-08-23 19:59:43 voyager

당신의 의도는 ".main"클래스로 지정 요소가 당신이 당신의 HTML 마크 업 및 CSS에 다음과 같은 변경 사항을 수행해야합니다 단지에 배경 색상 제공하는 경우 :로 지정

이동 요소를 "main"클래스는 "handle"과 "delete"로 표시된 클래스 사이에 있습니다.

<div class="c"> 
<p class="handle">...</p> 
<p class="main">...</p> 
<p class="delete">...</p> 
</div>

추가 :에

.main{ 
    ... 
    float:left; 
}

당신이 당신의 두 번째 예제에 오타가 있습니다 ".main"스타일에 "부동 소수점 왼쪽". 배경색은 "ccc"대신 "#ccc"여야합니다.

출처

2009-08-23 21:51:10

색상을 전부 (왼쪽, 주, & 오른쪽) 또는 중간 부분 만 포함 할 것인지 여부는 분명하지 않습니다. 어쨌든

.. 당신이 모두를 커버하고 싶다면 .. 메인 DIV의 폭을 만들 필요가 컨테이너의 폭과 동일 .. 반면에 예를

.main{ 
    width:500; 
    background-color:ccc; 
}

를 들어,이 시도 당신이 색상은 주요 사업부에서 일하려는 경우, 당신은이

.handle{ 
    float:left; 
    clear: left; 
} 
.delete{ 
    float:right; 
    clear: right; 
} 
.main{ 
    width:450; 
    background-color:ccc; 
    float: left; 
}

출처

2009-08-23 23:20:32 Aziz

추가 플로트처럼 ..이 왼쪽에 떠있는 뭔가를 확인해야합니다 : 문제를 해결할 것 .main 왼쪽.

ColorZilla firefox addon 또는 Firebug를 다운로드하면 무슨 일이 일어나는지보실 수 있습니다. .handle은 백그라운드에서 #ccc 인 이유 인 .main 안에 왼쪽으로 떠 있습니다.

출처

2009-08-23 23:35:54 Martin

div에 세 요소를 배치

답변

관련 문제