세 div의 정렬

다음 그림과 같이 세 div 스타일을 정렬하고 싶습니다. 어떻게하면 될까요?세 div의 정렬

enter image description here

내가 같은 HTML 코드 작성 : 내가 데려 가고 싶다는 enter image description here

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
<style type="text/css"> 
#container{ 
background-color:#00ff00; 
width:500px; 
height:500px; 
} 
#leftDiv{ 
background-color:#ff0000; 
width:250px; 
height:500px; 
} 
#rightDiv{ 
background-color:#0000fff; 
widht:250px; 
height:500px; 
} 
#other{ 
background-color:#ffff00; 
widht:500x; 
height:500px; 
} 
</style> 
</head> 
<body> 
<div id="container"> 
<div id="leftDiv"> 
</div> 
<div id="rightDiv"> 
<img src="Koala.jpg"> 
</div> 
</div> 
<div id="other"> 
</div> 
</body> 
</html>

을하지만 결과는 내 기대대로되지는 내 코드의 표현입니다 두 번째 (rightDiv) div에 그림.

도와주세요.

감사합니다.

출처

2012-03-29 Tom

Stackoverflow는 내 HTML 코드를 모두 표시 할 수 없습니다. 어떻게 표시 할 지 모릅니다. – Tom

코드에 기술적 인 결함이 없습니다. 인쇄상의 오류 일뿐입니다. – apnerve

안녕하세요. 매우 간단하여 스타일 시트로 바꾸어서 사용하십시오.

CSS

.container{ 
background-color:green; width:500px; 
} 

.leftDiv{ 
background-color:red; width:250px; 
height:500px; 
float:left; 
} 

.rightDiv{ 
background-color:pink; width:250px; 
height:500px; 
float:left; 
} 

.other{ 
background-color: #FFFF00; 
height:500px; 
clear:both; 
}

HTML

<div class="container"> 

    <div class="leftDiv">left</div> 
    <div class="rightDiv">right</div> 

    <div class="other">middle</div> 


</div>

지금이 http://jsfiddle.net/rohitazad/PLdyw/4/

출처

2012-03-29 05:36:23

절대 값을 사용하는 것은 div를 정렬하는 최선의 방법이 아니다. 더 나은 결과를 얻으려면 float 기법을 사용해야합니다. –

@MuhammadSannanKhalid 맞습니다. 제 대답을 업데이트했습니다. –

@azad 맞습니다. 마지막 버전 코드를 사용합니다. 내 div에 테이블과 다른 것들이 있기 때문에 결과가 원하는 것과 같지 않습니다. 플로트를 사용하면 작동합니다. 모두들 덕분에. – Tom

#other에 대해 작성한 스타일 규칙이 잘못 입력되었습니다. widht이 아니라 width이어야합니다.

#other{ 
    background-color:#ffff00; 
    widht:500x; /* This should have been 'width'. Resorting to StackOverflow for a typo error? :-o */ 
    height:500px; 
}

추신 : StackOverflow에 게시하기 전에 인쇄상의 오류를 확인하십시오. 감사.

출처

2012-03-29 05:23:27 apnerve

답장을 보내 주셔서 감사 드리며 인쇄상의 오류로 불편을 끼쳐 드려 죄송합니다. 하지만 올바른 맞춤법 오류가 작동하지 않았습니다. – Tom

그러면 이미지 너비 때문일 수 있습니다. 250px보다 넓을 수 있습니다. 'widht'를'width'로 변경하면 잘 작동합니다. 나는 그것들을 이미 테스트했다. (이것들과 같은 작은 것들이 어떤 테스트도 필요하지 않더라도) – apnerve

이 CSS를 시도해 보십시요.

.container{ 
background-color:green; width:500px; 
height:500px; 
position:relative;} 

.leftDiv{ 
    float:left; 
background-color:red; width:250px; 
height:500px; 
} 

.rightDiv{ 
background-color:pink; width:250px; 
height:500px; 
float:left; 
} 

.other{ 
background-color: #FFFF00; 
    clear:both; 
    width:500px; 
height:500px; 
}

출처

2012-03-29 05:48:21

세 div의 정렬

답변

관련 문제