음수 여백을 사용하지 않는 기본 Css 플로팅 쿼리

기본 질문이 있는데, 두 개의 섹션, 오른쪽 텍스트 섹션 및 왼쪽 텍스트 섹션이있는 메뉴 상자가 있지만 가로로 레이아웃이 둘다 가로로 표시되어 있습니다. 이미지, 나는 부정적인 여백을 사용하지 않고 둘 다 수평으로 정렬하고 싶습니다. 사용 enter image description here 음수 여백을 사용하지 않는 기본 Css 플로팅 쿼리

CSS는 :

<div id="Menu"> 
<div class="Menu-Left-Text">This<br />is the <br />section for<br />left text.</div> 
<div class="Menu-Right-Text">This<br />is the <br />section for<br />right text.</div> 
</div> 

#Menu .Menu-Left-Text 
{ 
margin-left: 9px; 
padding-top: 9px; 
font-size: 16pt; 
font-family: 'ITC Avant Garde Gothic'; 
font-weight: bolder; 
width: 189px; 


    } 
    #Menu .Menu-Right-Text 
{ 
float:right; 
font-family: 'Times New Roman' , Times, serif; 
font-weight: bold; 
}

출처

2011-09-12 Mr A

.Menu-Left-Text { float: left; width: 50%; } 
.Menu-Right-Text { margin-left: 50%; } 
#Menu { overflow: auto; }

위의 사용은 의미 당신의 #Menu 내부 페이지의 흐름에 뭔가있을거야 것을 의미합니다 당신의 #Menu에 의해 영향을받는 것 높이를해야합니다 그것의 내용. 그러면 실제로 작동 할 #Menu에 배경색/이미지를 추가 할 수 있습니다.

또는 당신이 IE7에서 일하거나 신경 쓰지 않는 경우 낮은 :이 공간의 같은 양을 복용 양쪽의 이익뿐만 아니라, 같은 영향을 미치는 모든 콘텐츠를 가지고

#Menu { display: table; } 
#Menu > div { display: table-cell; }

#Menu

출처

2011-09-12 12:25:44 Chris

을 시도, u는 제안을 또는 float를 사용하는 것 : right nd left 속성 –

벤을 설명하기 위해 내 대답을 업데이트했습니다. float 만 사용하는 방법에 대한이 방법의 장점. – Chris

메뉴 왼쪽 텍스트 클래스에 쓰기 float를 시도해보십시오. 그래서 새로운 CSS가된다 :

#Menu .Menu-Left-Text { 
    margin-left: 9px; 
    padding-top: 9px; 
    font-size: 16pt; 
    font-family: 'ITC Avant Garde Gothic'; 
    font-weight: bolder; 
    width: 189px; 
    float:left;

}

#Menu .Menu 오른쪽 텍스트 { 플로트 : 오른쪽;

font-family: 'Times New Roman' , Times, serif; 

font-weight: bold;

}

출처

2011-09-12 12:27:15

당신은 같은 것을 할 필요가 :

http://jsfiddle.net/patonar/Br2sQ/2/

출처

2011-09-12 12:29:17 diagonalbatman

이 할 수있는 가장 좋은 방법이

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<!-- Head --> 
<title></title> 
<style> 
#Menu .Menu-Left-Text 
{ 
float:left; 
margin-left: 9px; 
padding-top: 9px; 
font-size: 16pt; 
font-family: 'ITC Avant Garde Gothic'; 
font-weight: bolder; 
width: 189px; 


    } 
#Menu .Menu-Right-Text 
{ 
float:right; 
margin-right: 9px; 
padding-top: 9px; 
font-size: 16pt; 
font-family: 'Times New Roman' , Times, serif; 
font-weight: bold; 
} 
</style> 
</head> 
<body> 
<div id="Menu"> 
<div class="Menu-Left-Text">This<br />is the <br />section for<br />left text.</div> 
<div class="Menu-Right-Text">This<br />is the <br />section for<br />right text.</div> 
</div> 
</body> 
</html>

출처

2011-09-12 12:44:05

음수 여백을 사용하지 않는 기본 Css 플로팅 쿼리

답변

관련 문제