Basic Css Floating Query без использования отрицательных полей - PullRequest
Новая
       25

Basic Css Floating Query без использования отрицательных полей

0 голосов
/ 12 сентября 2011

У меня есть базовый вопрос, у меня есть окно меню, в котором есть два раздела: правый текстовый раздел и левый текстовый раздел, но я не могу расположить оба по горизонтали, как показано на рисунке, я хочу, чтобы оба были выровнены по горизонтали без использования отрицательных полей. enter image description here

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

Ответы [ 4 ]

1 голос
/ 12 сентября 2011

Попробуйте написать float: left в классе 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;

}

# Меню. Меню-Право-Текст { плавать: право; 

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

 font-weight: bold;

}

1 голос
/ 12 сентября 2011

Вам нужно сделать что-то вроде этого:

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

1 голос
/ 12 сентября 2011 
.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

0 голосов
/ 12 сентября 2011

Попробуйте это 

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