不使用负边距的基本 CSS 浮动查询

发布于 2024-12-03 21:24:43 字数 725 浏览 2 评论 0原文

我有一个基本问题，我有一个菜单框，其中有两个部分，右侧文本部分和左侧文本部分，但我无法如图所示水平布局两个部分，我希望两个部分水平对齐而不需要使用负边距。在此处输入图像描述

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

原文

I have got a basic question , I have got a menu box in which there are two sections , right -text section and left text section , but I cant layout both horizontally as shown in the image , i want both to be aligned in horizontally without using negative margins. enter image description here

Css used:

<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;
}

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

堇年纸鸢 2024-12-10 21:24:43

.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

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

Using the above means that there'll be something in the flow of the page inside your #Menu, meaning your #Menu will have a height that's affected by its content. That'll allow you to add a background colour / image to #Menu that will actually work.

Or, if you don't care about it working in IE7 or lower:

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

This has the benefit of both sides taking equal amount of space, as well as the all of the content affecting the height of the #Menu

回复收藏 0 原文

扭转时空 2024-12-10 21:24:43

尝试在 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;

}

Try write float:left in Menu-Left-Text class. so your new css becomes :

 #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
{
float:right;

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

 font-weight: bold;

}

回复收藏 0 原文

云淡风轻 2024-12-10 21:24:43

你需要做这样的事情：

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

回复收藏 0 原文

寄风 2024-12-10 21:24:43

试试这个

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

Try this

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

回复收藏 0 原文

~没有更多了~