작은 이미지와 텍스트로 응답 성있는 목록을 만드는 방법은 무엇입니까?

Question

다른 형식으로이 구조를 만들려는 경우, source이 그 주위에 있습니다. 이 예제에서는 <div> 태그를 사용하고 제 경우에는 <li>을 사용합니다. 나는 그 근원을 실행하는 것을 시도했다 그러나 작동하지 않았다. 그래서 나는이 HTML 구조과 같이 있습니다

<div id="body-content-right"> 
       <ul id="body-content-items"> 
        <li> 
         <img src="img/someimage.png" alt="Some text here "/> 
         <h1>Some text here Some text here Some text here </h1> 
         <p>Some text here Some text here Some text here Some text here </p> 
        </li> 
        <li> 
         <img src="img/someimage.png" alt="Some text here "/> 
         <h1>Some text here Some text here Some text here </h1> 
         <p>Some text here Some text here Some text here Some text here </p> 
        </li> 
        <li> 
         <img src="img/someimage.png" alt="Some text here "/> 
         <h1>Some text here Some text here Some text here </h1> 
         <p>Some text here Some text here Some text here Some text here </p> 
        </li> 
        <li> 
         <img src="img/someimage.png" alt="Some text here "/> 
         <h1>Some text here Some text here Some text here </h1> 
         <p>Some text here Some text here Some text here Some text here </p> 
        </li> 

       </ul> 
     </div><!--end body-content-right--> 

그리고이 CSS가 :

#body-content-right { 
     width:49.2307692308%; 
     float:right; 
     margin-top:130px; 
    } 
    #body-content-right ul li{ 
     float:left; width:47.9166666667%; 
     padding-bottom: 20px; 
     border:solid 1px red; 
    } 
    #body-content-items h1 { 
     font-size: 14px; 
     color: #0067a6; 
     -webkit-font-smoothing: antialiased !important; 
    } 
    #body-content-items p { font-size: 13px;} 

    #body-content-right ul li img{ float:left; padding-right:15px;} 

그래서 내가이 출력을 가지고 있습니다.

(사면 텍스트에 대한) 그리고 브라우저가 다음 텍스트 범위 또는 이미지의 하단 부분에 아래로가 아니라 흘러 크기를 조정되고있을 때 내가 원하는 것입니다. 그러면 내가 어떻게 할 수 있니?

Answer 1

본질적으로 사용하는 요소 (img, headline 및 p)는 블록 수준의 요소로 서로 쌓여 있습니다. 모바일을 먼저 시작하면 초기 상태는 이미 달성하려는 목표와 같습니다. 미디어 쿼리를 작성하고 특정 중단 점에 추가 한 플로트 스타일을 imho로 이동하는 것이 좋습니다. 내가 의미하는 특별한 경우에 목록 항목을 통해 기사를 선호 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements

: 측면에

는리스트의 모든 항목에 대해 하나의 옆에 H1하지를 가지고 시도해야합니다 유의하십시오.

응답 성있는 솔루션을 구축하려는 경우 일반적으로 px를 피하려고 노력해야합니다. 예를 들어 속성 ​​여백, 패딩 및 글꼴 크기에 적용됩니다.