Question

我正在创建一个网页并尝试使用div标签创建我网站的基本轮廓，但是，我创建了一个侧导航div和body div。我的网站大小为1500px宽度和1000px高度，侧面导航为300px，正文为1200px。

我认为这会将它们并排放置，但是，由于某种原因，身体div在侧面导航div下面。

<body>
<div id="encase">
    <div id="topNav">
        <p> topNav </p>
    </div>
    <div id="header">
        <p> header</p>
    </div>

    <div id="wholeBody">
        <div id="sideNav">
            <p> sideNav </p>
        </div>
        <div id="body1">
            <p> body1 </p>
        </div>
    </div>

    <div id="footer">
        <p> footer </p>
    </div>
</div>

这是css

<style>
#encase {
width: 100%;
height: 100%; 
margin-left: auto;
margin-right: auto;
}
#header {
background-color:black;
width: 1490px;
height:110px;
margin-left: auto;
margin-right: auto;
padding: 5px;
}
#topNav {
background-color:green;
width: 1490px;
height: 50px;
margin-left: auto;
margin-right: auto;
padding: 5px;
}
#wholeBody {
background-color: red;
width: 1490px;
height: 690px;
margin-left: auto;
margin-right: auto;
padding: 5px;
}
#sideNav {
background-color: yellow;
width: 290px;
height: 690px;
/*margin-left: 10.25%;*/
padding: 5px;
}
#body1 {
background-color: purple;
width: 1190px;
height: 690px;
margin-left: 16%;
padding: 5px;
}
#footer {
background-color: blue;
width: 1490px;
height: 110px;
margin-left: auto;
margin-right: auto;
padding: 5px;
}
</style>

我尝试使用百分比来做到这一点，但是，百分比似乎对我不起作用。有没有人知道如何解决我的问题？谢谢。

Answer 1

Just include a float:left inside your sideNav class in order to push the other div to the right,

fiddle url: https://jsfiddle.net/eugensunic/j030jyjm/

#sideNav {
float:left;
background-color: yellow;
width: 290px;
height: 690px;
/*margin-left: 10.25%;*/
padding: 5px;
}

Answer 2

将你的侧面导航向左移动。这应该可以解决你的问题。

#sideNav {
  background-color: yellow;
  width: 290px;
  height: 690px;
  float: left;
  padding: 5px;
 }

Answer 3

Div是块元素 - 这意味着，默认情况下，每个新div都将从新行开始。所以我们需要通过CSS取消这种行为。我们可以使用“float”属性使div移动到彼此旁边：

#sideNav {
    background-color: yellow;
    width: 290px;
    height: 690px;
    /*margin-left: 10.25%;*/
    padding: 5px;
    float: left;
}

添加浮动后，您可以将其全部切换回％，它也可以正常工作。

将来，如果可能的话，我建议您查看HTML5，因为它有更好的标记名称可以减少您正在使用的div数量。这使代码更清晰，更易读。

Answer 4

您对宽度的计算错误，您在margin-left: 16%中使用#body1这是导致此问题的因素之一，否则float:left会解决问题。

看看这个小提琴：https://jsfiddle.net/4jnbb5w3/

试图将2个区块放在彼此旁边

4 个答案: