Question

我正在学习HTML和CSS。现在我试图创建一个简单的布局， HEADER 在那下面a 一个菜单栏在那之下a 右边的导航栏和右边的主要部分我无法将导航栏和主要部分并排放置。

主要部分位于导航栏下方而不是侧面

The code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<center>
    <div style="height:70px; width:800px; background-color:red; color:white; font-size:30px" align="center">
    <strong>WELCOME</strong>
    </div>
    <div style="height:30px; width:800px; background-color:blue; color:white; font-size:15px; top:80px" align="center">
        <div style="width:200px; float:left">
            <a href="">HOME</a>
        </div>
        <div style="width:200px; float:left">
            <a href="C:\Users\Harish\Desktop\c prog.html">liwjoejlsn</a>
        </div>
        <div style="width:200px; float:left">
            <a href="">lskdjflsd</a>
        </div>
        <div style="width:200px; float:left">
            <a href="">ABOUT</a>
        </div>
    </div>
</center>
<center>
    <div style="height:800px; width:800px; background-color:grey; color:white; font-size:10px; top:100px">
        <div style="height:800px; width:200px; float:left; border-style:solid; border-width:2px;">
            <ul>
                <li>Hello</li>
                <li>hey</li>
                <li>who is</li>
                <li>forgive</li>
            </ul>
        </div>
        <div style="height:800px;width:600px; float:left; border-style:solid; border-width:2px; left:200px;">
            <p>
                lsjdgfio jsldfkslj;do fsmi;odfml dsijfo siuldhf iofj s dofus <br> klsjhdfioy oasdilufilh aoudsfk <br> ksajhkdfjhu aosls
            </p>
        </div>
    </div>
</center>
</body>

</html>

Answer 1

如果您希望并排使用两个div元素，则应使用float:left;。就您的代码而言，您使用的是旧代码，例如center，您应该开始命名div元素。如果你将css代码放在一个单独的文件中并从你的html调用它也会更好。

只有一篇文章可以覆盖太多内容，但我确实编写了一些小型演示，因此您可以看到float:left;的工作原理。我还修改了你的代码，所以现在你有了divs。

FLOAT LEFT DEMO

YOUR CODE

Answer 2

在此示例中，您可以使用

display: inline-block;

如何使用<div>标签并排放置两个盒子？</div>

2 个答案: