如何使div在同一行中

Question

I created 3 divs: 我创建了3个div：

header 头
menu 菜单
display area 展示区

I created three tag and I need to align two divs in the same row — the menu div in the left and display in the right. 我创建了三个标签，我需要在同一行中对齐两个div-菜单div在左侧，并在右侧显示。

I am getting error in that I tried many examples and none of them are working. 我尝试了许多示例，但都无法正常工作，因此出现了错误。

The header should be fixed in top 标头应固定在顶部
and others should be as it is 其他人应该保持原样

What could be the problem, and how can I fix it? 可能是什么问题，我该如何解决？

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

Answer 1

You need to use float:left property two show two DIVS in row. 您需要使用float:left属性两个在行中显示两个DIVS 。 and then use clear:both for div to place footer. 然后使用clear:both和div放置页脚。

HTML 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 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 DEMO

如何使div在同一行中

问题描述

1 个解决方案

解决方案1
0 已采纳 2014-09-09 16:41:18

如何使div在同一行中

问题描述

1 个解决方案

解决方案1 0 已采纳 2014-09-09 16:41:18

解决方案1
0 已采纳 2014-09-09 16:41:18