как сделать, чтобы Div в одном ряду

Я создал 3 дивы:как сделать, чтобы Div в одном ряду

заголовка
меню
область отображения

Я создал три метки, и мне нужно, чтобы выровнять две дивы в одна и та же строка - меню div слева и дисплей справа.

Я получаю ошибку в том, что я пробовал много примеров, и никто из них не работает.

Заголовок должен быть закреплен в верхней
и другие должны быть как

Что может быть проблема, и как я могу это исправить?

HTML

<html lang="en" class="no-js"> 
<head> 
    <meta charset="UTF-8" /> 
    <title>Blueprint: Vertical Icon Menu</title> 
    <link rel="shortcut icon" href="../favicon.ico"> 
    <link rel="stylesheet" type="text/css" href="css/leftmenu.css" /> 
    <link rel="stylesheet" type="text/css" href="flaticon.css" /> 
    <script src="js/modernizr.custom.js"></script> 
    <style> 
     body {position: relative;font-family: 'Lato', Calibri, Arial, sans-serif; color: #47a3da;} 
     body, html { font-size: 100%; height: 100%; padding: 0; margin: 0;} 
     a {color:#f0f0f0;text-decoration: none;} 
     a:hover {color: #000;} 
     #footer{height: 50px;background-color: #ddd;width: 100%;} 
     #header{z-index: 1;top: 0;margin-top: 0px;position: fixed;height: 90px;width: 100%;background-color: #ddd;} 
     .dis123{width: 500px;height: 500px;background-color: #ddd;text-align: left; 

       display: block; 
       margin-left: auto; 
       margin-right: auto;} 
     </style> 
    </head> 
    <div id="header"> 
    Head 
</div> 
<body> 
    <div class="postleftmen"> 
     <ul class="cbp-vimenu"> 
      <li><a href="#" class="">SELECT CATEGORY</a></li> 
      <li><a href="#" class="flaticon-smart">MOBILE&nbsp;&&nbsp;TABLET</a></li> 
      <li><a href="#" class="flaticon-pc6">ELECTRONICS&nbsp;&&nbsp;COMPUTER</a></li> 
      <li><a href="#" class="flaticon-car95">Vehicles</a></li> 
      <li><a href="#" class="flaticon-livingroom6">Home&nbsp;&&nbsp;Furniture</a></li> 
      <li><a href="#" class="flaticon-pets3">Pets</a></li> 
      <li><a href="#" class="flaticon-cd">Books,&nbsp;CDs&nbsp;&&nbsp;Hobbies</a></li> 
      <li><a href="#" class="flaticon-black276">Clothing&nbsp;&&nbsp;Accessories</a></li> 
      <li><a href="#" class="flaticon-baby23">Kids&nbsp;&&nbsp;Baby</a></li> 
      <li><a href="#" class="flaticon-bicycle14">Sports&nbsp;&&nbsp;Health</a></li> 
      <li><a href="#" class="flaticon-tools6">Services</a></li> 
      <li><a href="#" class="flaticon-businessman221">Jobs</a></li> 
      <li><a href="#" class="flaticon-house111">Real&nbsp;Estate</a></li> 
     </ul> 
    </div> 
    <div class="dis123"> 
     display 
    </div> 
    <div id="footer"> 
     footer 
    </div> 
</body> 
</html>

источник

2014-09-09 Anonymous

Вы можете посмотреть на CSS от Bootstrap. Специально две системные решетки. http://getbootstrap.com/css/#grid-example-basic. Надеюсь, это поможет. – celerno

Ваш ''

должен быть внутри вашей '' , а не между '' – Sean

я просто нужно выровнять 2 DIV в строке, как сделать – 2014-09-09 16:07:14

Вы должны использовать float:left собственность два показывают два DIVS в строке. и затем используйте clear:both для отправки div.

HTML

<div id="header"> 
    Head 
</div> 
    <div class="postleftmen"> 
     <ul class="cbp-vimenu"> 
      <li><a href="#" class="">SELECT CATEGORY</a></li> 
      <li><a href="#" class="flaticon-smart">MOBILE&nbsp;&&nbsp;TABLET</a></li> 
      <li><a href="#" class="flaticon-pc6">ELECTRONICS&nbsp;&&nbsp;COMPUTER</a></li> 
      <li><a href="#" class="flaticon-car95">Vehicles</a></li> 
      <li><a href="#" class="flaticon-livingroom6">Home&nbsp;&&nbsp;Furniture</a></li> 
      <li><a href="#" class="flaticon-pets3">Pets</a></li> 
      <li><a href="#" class="flaticon-cd">Books,&nbsp;CDs&nbsp;&&nbsp;Hobbies</a></li> 
      <li><a href="#" class="flaticon-black276">Clothing&nbsp;&&nbsp;Accessories</a></li> 
      <li><a href="#" class="flaticon-baby23">Kids&nbsp;&&nbsp;Baby</a></li> 
      <li><a href="#" class="flaticon-bicycle14">Sports&nbsp;&&nbsp;Health</a></li> 
      <li><a href="#" class="flaticon-tools6">Services</a></li> 
      <li><a href="#" class="flaticon-businessman221">Jobs</a></li> 
      <li><a href="#" class="flaticon-house111">Real&nbsp;Estate</a></li> 
     </ul> 
    </div> 
    <div class="dis123"> 
     display 
    </div> 
    <div style="clear:both"> </div> 
<div id="footer"> 
    Footer 
</div>

CSS

body {position: relative;font-family: 'Lato', Calibri, Arial, sans-serif; color: #47a3da;} 
body, html { font-size: 100%; height: 100%; padding: 0; margin: 0;} 
a {color:#f0f0f0;text-decoration: none;} 
a:hover {color: #000;} 
#header{height: 90px;width: 100%;background-color: #ddd;} 
#footer 
{ 
    height: 50px;width: 100%;background-color: #ddd; 
} 
.dis123 
{ 
    width:60%; 
    float:left; height: 500px;background-color: #ddd;text-align: left; 
} 
.postleftmen 
{ 
    width:40%; 
    float:left; 
}

DEMO

источник

2014-09-09 16:41:18

Могу ли я изменить заголовок в фиксированном положении ????? – 2014-09-10 04:55:03

Да, вы можете это сделать. Добавьте 'position: fixed' в CSS * header * и' margin-top: 90px' в CSS * dis123 * и * postleftmen * –

как сделать, чтобы Div в одном ряду

ответ

Смежные вопросы