Div 왼쪽 부동, 다른 오른쪽 인라인

Question

이것이 가장 근본적인 질문이라고 생각합니다. 5 년 동안 CSS를 망친 것 같은 느낌이 들었습니다.

pane-node-field-imageown 및 pane-node-field-short-place-intro의 클래스를 가진 두 개의 div이 있습니다. 그들은 내 페이지 상단에있는 클래스 burr-flipped-content-inner div에 래핑됩니다.

pane-node-field-imageown 클래스가 사업부와 HTML

<div class="burr-flipped-content-inner burr-flipped-content-region-inner panel-panel-inner"> 
    <div class="panel-pane pane-entity-field pane-node-field-imageown"> 
     <div class="panel-separator"></div> 
     <div class="panel-pane pane-entity-field pane-node-field-short-place-intro"> 
      <div class="panel-separator"></div> 
      <div class="panel-pane pane-vtiews-panes pane-og-nodes-panel-pane-2"> 
      </div> 

, 나는 왼쪽으로 떠 싶습니다. 그것은 가장 적합한에 보인다

.pane-node-field-imageown 
{ 
    float:left; 
    display: inline-block; 
} 

CSS는 내가 inline-block 값을 추가했다. 문제는 pane-node-field-short-place-intro div가 첫 번째 블록의 오른쪽에 잘 앉도록하는 것입니다. 그것의 뒤에 숨기고 싶은 것처럼 보인다. (비록 내 텍스트는 괜찮을 것 같지만). 내가 원하는 동작을 얻을 수있는 유일한 방법은 두 번째 블록이 CSS 함께 :

.pane-node-field-short-place-intro { 
    display: table; 
    padding: 0 10px; 
} 

.pane-node-field-short-place-intro .pane-content { 
    background: none repeat scroll 0 0 #444444; 
    padding:10px; 
} 

이 잘 생각하지 않습니다. 내 페이지는 viewed here for reference 일 수 있습니다.

Answer 1

당신은이 작업을 수행 할 수 있습니다 :

.pane-node-field-short-place-intro { 
padding: 3px 5px 0 20px; 
overflow: hidden; 
} 

Answer 2

jsFiddle - CSS는
http://jsfiddle.net/kn9RE/9/

CSS의 표준화 수레 -하여 FIRST 참조하는 스타일 시트를 만들 수 있는지 확인을
http://necolas.github.io/normalize.css/

우선, 프론트 엔드 마크 업을 과도하게 설계하고 있습니다. 현재 마크 업이 "Div Spaghetti"와 비슷하기 때문에이 말을합니다. 전체 HTML 코드를 평가하고 모든 CSS를 제거하고 페이지 구조에 대한 견고한 느낌을 얻는 것으로 시작하겠습니다. 이 문제를 해결하기위한 쉬운 방법이 있지만 항상 코드를 분석하고 "적은 코드로이 작업을 수행 할 수 있습니까?"라고 자문 해보십시오. 쉬운 길을 가기 위해 점프하지 마라. 빈약 한 습관으로 가득 찬 코드베이스로 끝나는 경우가 많다.

은 기존 HTML을 사용해야하는 경우 문제에 반창고를 적용 할 수 있습니다.

.pane-node-field-imageown 
{ 
float:left; 
} 

.pane-node-field-short-place-intro 
{ 
max-width: 660px; 
float:left; 
padding: 10px 5px 0 15px; 
} 

.field-item even 
{ 

} 

질문이 있으시면 언제든지 알려주세요. 나에게 언제든지 메시지를 보내주십시오.