표를 사용하지 않고 텍스트의 특정 단락 옆에 있는 레이아웃 요소

StackOverflow https://stackoverflow.com/questions/1402292

  •  05-07-2019
  •  | 
  •  

문제

따라서 웹페이지에는 단락 형식으로 긴 텍스트가 표시됩니다.목표는 어떤 방식으로든 단락을 변경하지 않고 그림이나 텍스트 같은 요소를 단락 17 또는 26 옆에 배치하는 것입니다(예:단락을 둘러쌀 필요는 없습니다.)

지금까지 내가 볼 수 있는 가장 좋은 방법은 텍스트를 테이블에 배치하고 텍스트를 위한 열(각 행에 하나의 단락)을 배치하고 ID(ID)로 배치된 요소로 채울 수 있는 빈 공간을 배치하는 것입니다. 행 번호임).

이건 좀 투박해 보입니다.우선, 추가된 요소가 단락보다 세로로 길면 원본 텍스트에 공백이 생깁니다.또 다른 경우 각 단락은 이제 다음과 같습니다. 

<tr><td><p> garble fizz thoutrious</p></td><td id = "#"***></td></tr>

누구든지 적절한 대안을 생각할 수 있습니까?

***그런 다음 jQuery를 사용하면 해당 td ID를 쉽게 가져와 내가 원하는 대로 채울 수 있습니다.

Andre의 답변 후 편집 :

그래서 일련의 단락이 있습니다.

<p>Thing thing thing</p>
<p>Thang Thang Thang</p>
<p>Sing Sing Sing</p>
<p>Song Song Song</p>

예를 들어 세 번째 단락에 텍스트나 이미지 또는 일부 요소를 추가하여 다음과 같은 결과를 얻을 수 있기를 원합니다.

<p>Thing thing thing</p>
<p>Thang Thang Thang</p>
<p>Sing Sing Sing</p><img>
<p>Song Song Song</p>

다음과 같은 레이아웃을 사용합니다.

[p   ]
[p   ]
[p   ][img]
[p   ]

...너비가 고정된 곳

Andre의 솔루션에서 제가 본 문제는...실제로는 아닙니다. 빈 범위는 잘 맞고, 바인딩된 단락과 연결된 ID를 가지므로 필요에 따라 채울 수 있고 각 단락을 지울 수 있습니다.

그리고 [img]가 더 클 때 [p] 사이에 간격이 없어야 합니다.

나는 그것을 테스트한 다음 내 생각에 답변을 부여할 것입니다.

도움이 되었습니까?

해결책

글쎄, 마일리지는 브라우저에 따라 다르며 float 및 Clear를 얼마나 잘 처리하는지에 따라 다를 수 있지만 이는 IE 7, Google Chrome 및 FireFox 3.5에서 상당히 잘 작동했습니다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  <title>CSS Float/Clear example</title>
  <style type="text/css">
    p.firstParagraph
    {
      width: 50%;
      float: left;
    }

    p.secondParagraph
    {
      width: 50%;
      float: left;
    }
  </style>
 </head>
 <body>
  <p class="firstParagraph">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. In in ante non massa vehicula sodales. Praesent blandit venenatis purus non mollis. Nunc consectetur urna quis eros sollicitudin rhoncus. Nulla in nulla nibh. Ut in eros erat. Donec pharetra ultricies lacus, quis tincidunt orci iaculis at. Suspendisse varius posuere diam sed feugiat. Sed eu ipsum massa, vel ultricies augue. Duis sem augue, faucibus sit amet suscipit id, ultrices nec augue. Sed vel diam quis risus venenatis congue vitae eget urna. Sed sapien nisi, hendrerit a euismod quis, iaculis eu enim. 
  </p>

  <p class="secondParagraph">
    Something else
  </p>
 </body>
</html>
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top