위치가 다른 동일한 div입니까? (CSS)

Question

다른 위치의 CSS div를 사용할 수 있습니까? 예를 들어 자주 사용하는 div 스타일이 있으며 다른 위치를 원할 때마다 다른 ID를 만드는 것이 과도한 것으로 보입니다. HTML 내에서 div의 위치를 ​​지정할 수 있습니까?

감사합니다.

Answer 1

당신은 코드에서 스타일 인라인을 지정할 수 있습니다

<div style="left:10px;top:20px;"> 

내가 일반적으로하지만,이를 방지하려고합니다. 모든 스타일이 한 곳에 있으면 코드를 유지하는 것이 더 쉽습니다.

Answer 2

정확한 질문을 잘 모르겠지만 요소에 여러 클래스를 할당 할 수 있으며 css 인라인을 지정할 수 있습니다. 이러한 기법을 조합하면 위치를 매우 편리하게 변경할 수 있습니다.

Answer 3

내가 정확하게 문제를 이해한다면, 당신은 대신 ID의 클래스를 사용할 수 있습니다 : 동일한 ID를 가진 두 개 이상의 요소를 가질 수 없습니다

<div class="something">...</div> 

.something { whatever: whatever } 

Answer 4

. 대신 ID에 의해 위치를 정의는 특정 요소에 특정 속성 만의 일반적인 속성에 대한 클래스와 ID를 사용 : 당신은 DIV에 여러 클래스를 전달할 수

.positionDiv { 
    width: 400px; 
    height: 200px; 
} 
#div1 { 
    left: 20px; 
} 
#dev2 { 
    left: 40px; 
} 

<div class='positionDiv' id='div1'>first div</div> 
<div class='positionDiv' id='div2'>second div</div> 

Answer 5

. 모든 기본 속성을 가진 하나의 클래스를 만듭니다. 그런 다음 원하는 곳에 DIV를 배치하는 몇 가지 추가 클래스를 만듭니다.

.defaults 
{ 
    properties... 
} 
.position1 
{ 
    top: 0; 
    left: 100px; 
} 
.position2 
{ 
    top 100px; 
    left: 0; 
} 

<div class="defaults position1"></div> 
<div class="defaults position2"></div> 

Answer 6

가능한 경우 인라인 스타일을 사용하지 마십시오. 가독성과 유지 보수를 위해 스타일과 HTML을 구분하고 싶습니다.

div에 여분의 클래스를 대신 추가하십시오.

HTML

<div class="styled"> 
</div> 
<div class="styled otherclass"> 
</div> 

CSS

.styled { background: red; border: 1px solid blue; } 
.otherclass { background: green } 

두 번째 줄은 배경을 우선한다. 따라서 경계선은 스타일 클래스에서 상속됩니다.