>

이것은 상당히 새롭고 패딩을 사용하는 대신 내부 내용에 대한 여백으로 div를 사용하는 것을 발견합니다.

<div class="container" style="width:100%; height:500px; positon:relative;">
    <div class="subcontainer" style="width:25%; height:100%; position:relative; float:left;">
	    <div class="subcontainer" style="width:100%; height:40%; position:relative; overflow:visible;">
		    <img src="" style="width:200px; height:200px; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);">
		</div>
		<div class="subcontainer" style="width:100%; height:60%; position:relative;">
		    <div class="marcontainer" style="position:absolute; width:80%; height:80%; top:50%; left:10%; transform:translateY(-50%); text-align:left;">
			    <h5>Build a website</h5>
				<h6>You'll learn the basics to building a website with an introduction to text editors, basic HTML tags, and advanced HTML skills.</h6>
				<a href="#"><h6>Leer más</h6></a>
			    
			</div>
		</div>
	</div>
	<div class="subcontainer" style="width:25%; height:100%; position:relative; float:left;">
	    <div class="subcontainer" style="width:100%; height:40%; position:relative; overflow:visible;">
		    <img src="" style="width:200px; height:200px; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);">
		</div>
		<div class="subcontainer" style="width:100%; height:60%; position:relative;">
		    <div class="marcontainer" style="position:absolute; width:80%; height:80%; top:50%; left:10%; transform:translateY(-50%); text-align:left;">
			    <h5>Build a website</h5>
				<h6>You'll learn the basics to building a website with an introduction to text editors, basic HTML tags, and advanced HTML skills.</h6>
				<a href="#"><h6>Leer más</h6></a>
			    
			</div>
		</div>
	</div>
	<div class="subcontainer" style="width:25%; height:100%; position:relative; float:left;">
	    <div class="subcontainer" style="width:100%; height:40%; position:relative; overflow:visible;">
		    <img src="" style="width:200px; height:200px; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);">
		</div>
		<div class="subcontainer" style="width:100%; height:60%; position:relative;">
		    <div class="marcontainer" style="position:absolute; width:80%; height:80%; top:50%; left:10%; transform:translateY(-50%); text-align:left;">
			    <h5>Build a website</h5>
				<h6>You'll learn the basics to building a website with an introduction to text editors, basic HTML tags, and advanced HTML skills.</h6>
				<a href="#"><h6>Leer más</h6></a>
			    
			</div>
		</div>
	</div>
	<div class="subcontainer" style="width:25%; height:100%; position:relative; float:left;">
	    <div class="subcontainer" style="width:100%; height:40%; position:relative; overflow:visible;">
		    <img src="" style="width:200px; height:200px; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);">
		</div>
		<div class="subcontainer" style="width:100%; height:60%; position:relative;">
		    <div class="marcontainer" style="position:absolute; width:80%; height:80%; top:50%; left:10%; transform:translateY(-50%); text-align:left;">
			    <h5>Build a website</h5>
				<h6>You'll learn the basics to building a website with an introduction to text editors, basic HTML tags, and advanced HTML skills.</h6>
				<a href="#"><h6>Leer más</h6></a>
			    
			</div>
		</div>
	</div>
</div>

이것이 좋은 습관입니까? 그것은 내가 만들고 싶은 페이지의 레이아웃을 시각화하는 데 도움이되지만 불필요하게 혼란 스러운지 모르겠습니다. 저에게는 이해가 되겠습니다.

  • 답변 # 1

    IMO, 좋은 습관이 아니기 때문에

    코드 길이가 증가합니다

    가독성이 줄어 듭니다

    인라인 스타일링을 사용하는 것도 좋은 옵션이 아닙니다.

    페이지 디자인에 맞는 div 만 사용하십시오.

    예 : 블로그 게시물의 경우 머리글/바닥 글/주요 콘텐츠 영역에 div를 사용하고 클래스를 통한 스타일링이 포함 된 블로그 게시물에 각각 div를 사용하십시오

  • 이전 Haskell Aeson - 하스켈 에이 슨 - 광택:json 인스턴스 파서 : 색상
  • 다음 android - CustomCalendar 날짜