基本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 property –

我已經更新了我的答案以解釋本這種方法比僅使用浮動的效果更好。 – Chris

嘗試寫入float：留在Menu-Left-Text類中。所以你的新的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。菜單，右鍵文本 { 浮動：權利;

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浮動查詢不使用負邊距

回答

相關問題