여러 행에 걸쳐 플로팅 div 주위에 테이블 내용 배치하기

Question

내 페이지 아래쪽 부분에 각각 동적으로 생성 된 텍스트의 양이 다양한 두 개의 열과 행이있는 테이블이 있습니다.

div (고정 크기)를 플로팅하여 오른쪽 위 모서리에서 필요할 수있는만큼 많은 두 번째 열을 배치하고 필요에 따라 줄 바꿈하는 줄을 배치하고 싶습니다.

예를 들어 div의 하단이 세 번째 행의 중간에있는 경우 해당 행의 텍스트가 div의 왼쪽 및 아래 가장자리를 둘러 쌀 수 있습니다.

나는 이것이 의미가 있기를 바랍니다. 아무도 도와 줄 수 있습니까?

Answer 1

난 그 테이블 요소의 올바른 사용 될 믿지 않는다. 문제를 해결하려면 div 또는 p 요소를 사용하는 것이 좋습니다. 빨간색 요소를 오른쪽으로 띄우면 뒤 따르는 요소가 감싸집니다. 테이블을 사용하려면 테이블 옆에 세 번째 열 또는 절대 절대 div를 사용하는 것이 좋습니다.

p { 
 
    margin: 0; 
 
    padding: 10px; 
 
} 
 
#wrapper { 
 
    width: 500px; 
 
} 
 
.row { 
 
    position: relative; 
 
    border-top: 2px solid #000; 
 
    border-left: 2px solid #000; 
 
    border-right: 2px solid #000; 
 
} 
 
.row:last-child { 
 
    border-bottom: 2px solid #000; 
 
} 
 
#table p:first-child { 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    width: 20%; 
 
    padding: 2%; 
 
    border-right: 2px solid #000; 
 
} 
 
#table p:nth-child(2) { 
 
    margin: 0 0 0 24%; 
 
    width: 71%; 
 
} 
 
#rightColumn { 
 
    border: 2px solid #000; 
 
    position: relative; 
 
    z-index: 1; 
 
    float: right; 
 
    background: #ff0000; 
 
    width: 20%; 
 
    margin: 0 0 2px 2px; 
 
}

<div id="wrapper"> 
 
    <div id="rightColumn"> 
 
    <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p> 
 
    </div> 
 
    <div id="table"> 
 
    <div class="row"> 
 
     <p>text text text</p> 
 
     <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text 
 
     text text text text text text text text text text text</p> 
 
    </div> 
 
    <div class="row"> 
 
     <p>text text text</p> 
 
     <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text 
 
     text text text text text text text text text text text</p> 
 
    </div> 
 
    <div class="row"> 
 
     <p>text text text</p> 
 
     <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text 
 
     text text text text text text text text text text text</p> 
 
    </div> 
 
    <div class="row"> 
 
     <p>text text text</p> 
 
     <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text 
 
     text text text text text text text text text text text</p> 
 
    </div> 
 
    <div class="row"> 
 
     <p>text text text</p> 
 
     <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text 
 
     text text text text text text text text text text text</p> 
 
    </div> 
 
    </div> 
 
</div>