다음과 같은 코드가 있습니다.
<div style="display: table; width: 100%; table-layout: fixed; border-spacing: 10px;">
<div style="text-align: center; display: table-cell;">
<a href="#"><img src="/image.png" alt="" width="auto" border="0" /></a>
<br>
Text
</div>
<div style="text-align: center; display: table-cell;">
<a href="#"><img src="/image.png" alt="" width="auto" border="0" /></a>
<br>
Text
</div>
<div style="text-align: center; display: table-cell;">
<a href="#"><img src="/image.png" alt="" width="auto" border="0" /></a>
<br>
Text
</div>
<div style="text-align: center; display: table-cell;">
<a href="#"><img src="/image.png" alt="" width="auto" border="0" /></a>
<br>
Text
</div>
</div>
PC에서는 제대로 작동하지만 모바일 장치에서는 매우보기 흉하게 작동하며 모든 이미지와 텍스트가 바닥으로 이동합니다. 수정 방법, div가 4x1 라인, 2x2 라인 중심, 1x4 라인 중심 (모바일 용) 형식을 지정할 수 있습니다.
반응 형 그리드 시스템을 찾고 있습니다. 따라서 그리드 시스템이 있고 반응하는 CSS를 추가해야합니다. 수년간 가장 흔한 것은 부트 스트랩이었습니다.
헤드 섹션의 HTML에 다음 CSS를 추가하기 만하면됩니다.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha256-7s5uDGW3AHqw6xtJmNNtr+OBRJUlgkNJEo78P4b0yRw= sha512-nNo+yCHEyn0smMxSswnf/OnX6/KwJuZTlNZBjauKhTK0c+zT+q5JOCx0UFhXQ6rJR9jg6Es8gPuD2uZcYDLqSw==" crossorigin="anonymous">
자세한 내용은 다음 웹 사이트에서 Bootstrap을 참조하십시오. http://getbootstrap.com/
다음으로 그리드 시스템을 사용하려는 Bootstrap은 12 단위 그리드 시스템을 사용하므로 전체 페이지가 12 블록으로 나뉩니다. 또한 크기에 따라 각 장치를 XS, SM, MD, LG 중 하나로 정의합니다.
여기에서 자세히 알아보기 : http://getbootstrap.com/css/#grid
간단히 말해서 모바일은 XS (Extra Small) Portrait로 간주되며 Lanscape는 다를 수 있으므로 기존 HTML은 다음과 같아야합니다.
<div class="container" style="text-align:center"> <div class="row">
<div class="col-xs-12 col-md-6 col-lg-3">
<a href="#"><img src="/image.png" alt="" width="auto" border="0" /></a>
<br>
Text
</div>
<div class="col-xs-12 col-md-6 col-lg-3">
<a href="#"><img src="/image.png" alt="" width="auto" border="0" /></a>
<br>
Text
</div>
<div class="col-xs-12 col-md-6 col-lg-3">
<a href="#"><img src="/image.png" alt="" width="auto" border="0" /></a>
<br>
Text
</div>
<div class="col-xs-12 col-md-6 col-lg-3">
<a href="#"><img src="/image.png" alt="" width="auto" border="0" /></a>
<br>
Text
</div>
</div></div>
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다