不使用负边距的基本 Css 浮动查询答案

【问题标题】：Basic Css Floating Query without using negative margins不使用负边距的基本 Css 浮动查询
【发布时间】：2012-05-31 22:48:45
【问题描述】：

我有一个基本问题，我有一个菜单框，其中有两个部分，右文本部分和左文本部分，但我不能水平布局，如图所示，我希望两者都对齐在不使用负边距的情况下水平插入。

使用的 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;
}

【问题讨论】：

标签： css css-float margin

【解决方案1】：

.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高度的所有内容

【讨论】：

这是最好的方法，你建议的或者使用 float :right nd left 属性的方法
我已经更新了我的答案，以解释这种方法相对于仅使用浮点数的好处。

【解决方案2】：

尝试在 Menu-Left-Text 类中写入 float:left。所以你的新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-Right-Text { 浮动：对；

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

 font-weight: bold;

}

【讨论】：

【解决方案3】：

你需要做这样的事情：

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

【讨论】：

【解决方案4】：

试试这个

<!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>

【讨论】：