试图将2个块彼此相邻放置[重复]答案

【问题标题】：Trying to position 2 blocks next to each other [duplicate]试图将2个块彼此相邻放置[重复]
【发布时间】：2015-10-29 16:54:23
【问题描述】：

我正在创建一个网页并尝试使用 div 标签创建网站的基本轮廓，但是，我创建了一个侧导航 div 和 body div。我的网站大小是 1500px 宽和 1000px 高，侧边导航是 300px，body 是 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>

我也尝试使用百分比来执行此操作，但是，百分比对我来说似乎无法正常工作。有谁知道如何解决我的问题？谢谢。

【问题讨论】：

标签： html css percentage

【解决方案1】：

将您的侧导航浮动到左侧。这应该可以解决您的问题。

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

【讨论】：

【解决方案2】：

Divs 是块元素 - 这意味着，默认情况下，每个新 div 将在新行开始。所以我们需要通过 CSS 取消该行为。我们可以使用“float”属性让 div 彼此相邻移动：

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

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

在未来，如果可能的话，我会鼓励你看看 HTML5，因为它有更好的标签名称，可以减少你使用的 div 的数量。这使得代码更清晰、更易读。

【讨论】：

【解决方案3】：

只需在 sideNav 类中包含 float:left 即可将另一个 div 向右推，

小提琴网址：https://jsfiddle.net/eugensunic/j030jyjm/

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

【讨论】：

【解决方案4】：

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

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

【讨论】：