평범한 오래된 HTML을 사용하여 흐름 레이아웃 동작을 할 수 있습니까?

일반 HTML을 사용하면 어떻게 이런 레이아웃을 얻을 수 있습니까?평범한 오래된 HTML을 사용하여 흐름 레이아웃 동작을 할 수 있습니까?

enter image description here

나는 배열의 10 ~ 50 개 동적 요소를 가지고, 나는 같이이를 표시해야합니다.

그냥 모든 항목을 컨테이너 div에 추가하면 왼쪽에서 오른쪽으로 이동합니다.

각 요소가 div 인 경우 위쪽에서 아래쪽으로 쌓이지 만 다음 열로는 결코 감싸지 않습니다.

일반적으로 일반 HTML을 사용하면 어떻게됩니까? 편집 동적으로 작업하려면이 기능이 필요합니다. 어쩌면 2 개 항목 또는 50 개가있을 수 있습니다. 3 <ul> 목록을 하드 코드 할 수 없습니다.

출처

2011-07-27 Judah Himango

? CSS를 사용하고 싶지 않으십니까? –

나는 흐름 레이아웃을 달성하기 위해 자바 스크립트 허커릿에 의지하고 싶지 않다. JS로 사용자 정의 동작을 작성하지 않고도이 작업을 수행 할 수있는 HTML/CSS 방법이 있기를 바랬습니다. –

<!DOCTYPE html> 
<html> 
<head><title>Test</title> 
<style type="text/css"> 
.flow ul { 
    float: left; 
} 

.flow li { 
    list-style: none; 
} 
</style> 
</head> 
<body> 
    <div class="flow"> 
     <ul> 
      <li>Albany, 1324</li> 
      <li>Albuquerque, 3456</li> 
      <li>Baton Rouge, 4566</li> 
      <li>Bellvue, 9856</li> 
      <li>Catameran, 75696</li> 
     </ul> 
     <ul> 
      <li>D SiteName, 1324</li> 
      <li>E SiteName, 3456</li> 
      <li>F SiteName, 4566</li> 
      <li>SiteName, 9856</li> 
      <li>SiteName, 75696</li> 
     </ul> 
     <ul> 
      <li>SiteName, 1324</li> 
      <li>SiteName, 3456</li> 
      <li>SiteName, 4566</li> 
      <li>SiteName, 9856</li> 
      <li>SiteName, 75696</li> 
     </ul> 
    </div> 
</body> 
</html>

또는 당신이 말할 때 당신이 CSS없이 뭔가를 의미하는 경우, "평범한 구식 HTML은"이 같은 것을 할 수 있습니다 그러나 이것은 아마도이 <div> 요소를 사용하지 않기 때문에 당신이 원하는 것이 아닙니다.

<!DOCTYPE html> 
<html> 
<head><title>Test</title> 
<body> 
    <table> 
    <tr> 
    <td> 
     <ul> 
      <li>Albany, 1324</li> 
      <li>Albuquerque, 3456</li> 
      <li>Baton Rouge, 4566</li> 
      <li>Bellvue, 9856</li> 
      <li>Catameran, 75696</li> 
     </ul> 
    </td> 
    <td> 
     <ul> 
      <li>D SiteName, 1324</li> 
      <li>E SiteName, 3456</li> 
      <li>F SiteName, 4566</li> 
      <li>SiteName, 9856</li> 
      <li>SiteName, 75696</li> 
     </ul> 
    </td> 
    <td> 
     <ul> 
      <li>SiteName, 1324</li> 
      <li>SiteName, 3456</li> 
      <li>SiteName, 4566</li> 
      <li>SiteName, 9856</li> 
      <li>SiteName, 75696</li> 
     </ul> 
    </td> 
    </tr> 
    </table> 
</body> 
</html>

당신은 또한 당신이 필요에 따라 <ul> 및 <li> 요소 intead <br> 요소 종료 라인을 사용 할 수 있습니다.

출처

2011-07-27 02:44:15

안녕하세요, 저는 여기에서 반짝이는 새 HTML5를 사용하고 있습니다. 아마도 평범한 HTML4.01 Strict를 사용하기 위해 DOCTYPE을 변경할 수 있습니다. :-) –

흠. 글쎄, 내 항목 목록은 AJAX 호출에서 가져온 동적입니다. 그래서 나는 이것이 정확하게 작동한다고 생각하지 않지만 템플릿 해커 비트를 사용하여이를 어떻게 수행 할 수 있는지에 대한 아이디어를 제공합니다. 감사. –

물론 배열의 요소를 세 개의 별도 목록에 표시하는 논리를 생각하고 개발해야합니다. 우리가 정확히 무엇을하고 있는지 모르기 때문에 우리는 여기서 당신을 위해 그것을 할 수 있습니다. :-)하지만 위의 두 예제 중 하나가 시작하는 데 도움이되기를 바랍니다. :-) –

표를 사용하십시오. 하나님은 사람들이 그래픽보다 훨씬 더 많이 사용한다는 것을 알고 있습니다. 그러나 이것은 그들이 구축 한 것입니다.

자동으로 줄 바꿈을 할 수 있는지 모르겠지만 수레를 사용하는 경우에도 어쨌든 열을 미리 정의해야합니다.

구문 here을 찾을 수 있습니다.

출처

2011-07-27 02:46:40 Iterate

일반 HTML에서는 ordered lists을 사용하고 각 열의 목록을 재설정합니다.

<ol> 
    <li>.</li> 
    <li>.</li> 
    <li>.</li> 
    <li>.</li> 
</ol> 

<ol start="5"> 
    <li>.</li> 
    <li>.</li> 
    <li>.</li> 
    <li>.</li> 
</ol>

등

그런 float 왼쪽에있는 목록.

물론 동적으로 업데이트되지는 않습니다.

편집 주석 사항에 따라

, 당신은

div{ 
    column-count: 3; 
    column-gap: 1em; 
    column-rule: 1px solid black; 
    -moz-column-count: 3; 
    -moz-column-gap: 1em; 
    -moz-column-rule: 1px solid black; 
    -webkit-column-count: 3; 
    -webkit-column-gap: 1em; 
    -webkit-column-rule: 1px solid black; 
}

http://jsfiddle.net/jasongennaro/3GSp6/1/

이 최신 브라우저입니다 CSS3 동적으로이 작업을 수행 할 수 있습니다. 크롬, 파이어 폭스, 사파리. 이처럼

출처

2011-07-27 02:48:54

동적으로 작동하려면이 기능이 필요합니다. –

을 : 당신은 "평범한 구식 HTML"무엇을 의미합니까 http://jsfiddle.net/PTLm6/5/

출처

2011-07-27 02:53:23 Sparkup