添加内容时侧边栏一直消失

Question

请耐心等待，因为我对 HTML 还很陌生，

我已经有以下 HTML：

<div class="middle">

    <div class="container">
        <main class="content">
        </main><!-- .content -->
    </div><!-- .container-->
    <aside class="left-sidebar">
        <ul class="nav">
            <li><a href="index.html">HOME</a></li>
            <li><a href="over.html">OVER</a></li>
            <li><a href="reizen.html">REIZEN</a></li>
            <li><a href="afbeeldingen.html">AFBEELDINGEN</a></li>
            <li><a href="boek_nu.html">BOEK NU</a></li>
            <li><a href="forum.html">FORUM</a></li>
        </ul>
    </aside><!-- .left-sidebar -->
    </div><!-- .middle-->
</div><!-- .wrapper -->

CSS：

.wrapper {
    width: 100%;
    margin: 0 auto;
}
.header {
    height: 60px;
    background: black;
    opacity: 0.7;
    margin-top: 1%;
    position: relative;
    color: white;
    font: helvetica
}
.container {
    position: relative;
    width: 100%;
    margin-top: 10%;
}
.content {
    padding: 0 0 0 270px;
}
/* Left Sidebar -----------------------------------------------------------------------------*/
 .left-sidebar {
    position: relative;
    float: left;
    width: 10%;
    height;
    150%;
    margin-left: 7%;
    margin-top: 4%;
    opacity: 0.7;
    font-family:"Montserrat", sans-serif;
    font-size: 20px;
    color: Red;
}

每当我尝试在“内容”区域添加大图片时，整个侧边栏都会消失。 我在 CSS 中有一些代码可以正确定位侧边栏，我很确定这是问题所在。

我的问题是：什么是正确的 CSS 代码可以使侧边栏位于左侧某处，而内容区域位于右侧？

Answer 1

你有很多事情对你不利。将.container 设置为 90% 将不起作用，因为它没有浮动。具有设定宽度的块级元素仍将占据整个宽度，所发生的情况是剩余空间被边距填充。浮动会消除该边距，但会带来您需要注意的其他问题。

如果您将.container 浮动到右侧并将其宽度设置为 83%，您将实现您想要的。为什么是 83%？ .left-sidebar 的宽度是 10% 加上 7% 的边距 = 总侧边栏宽度的 17%。即使经过这次调整，我担心它可能并不完美，因为 .container 上的 10% 上边距和 .content 上 270 像素的左填充和 .left-sidebar 上 4% 的上边距可能不是你想要的。

.wrapper {
    width: 100%;
    margin: 0 auto;
}
.header {
    height: 60px;
    background: black;
    opacity: 0.7;
    margin-top: 1%;
    position: relative;
    color: white;
    font: helvetica
}
.container {
    float: right;
    width: 83%;
    margin-top: 10%;
}
.content {
    padding: 0 0 0 270px;
}
.left-sidebar {
    position: relative;
    float: left;
    width: 10%;
    height;
    150%;
    margin-left: 7%;
    margin-top: 4%;
    opacity: 0.7;
    font-family: "Montserrat", sans-serif;
    font-size: 20px;
    color: Red;
}

<div class="middle">
    <div class="container">
        <main class="content">
          <img src="http://lorempixel.com/400/400/city">
        </main><!-- .content -->
    </div><!-- .container-->
    <aside class="left-sidebar">
        <ul class="nav">
            <li><a href="index.html">HOME</a></li>
            <li><a href="over.html">OVER</a></li>
            <li><a href="reizen.html">REIZEN</a></li>
            <li><a href="afbeeldingen.html">AFBEELDINGEN</a></li>
            <li><a href="boek_nu.html">BOEK NU</a></li>
            <li><a href="forum.html">FORUM</a></li>
        </ul>
    </aside><!-- .left-sidebar -->
</div><!-- .middle-->

让我借此机会介绍带有border-box 值的CSS 属性box-sizing，它允许您使用不同的盒子模型。

.example {
   width: 100px;
   padding: 0 10px;
}

通常总宽度为 120px = 10px + 100px + 10px。

.example {
   box-sizing: border-box;
   width: 100px;
   padding: 0 10px;
}

box-sizing: border-box 的总宽度将是 100px = 10px + 90px + 10px，由 width 属性指定。如果你说某事应该是 XXX 宽度，那将是并且该数量包括填充、边距等。

Should you use box-sizing: border-box?

Answer 2

真正的问题在于 HTML 布局设计而不是 CSS 您应该将左栏（导航）放在内容之前 类似这样的东西：页眉、导航器、内容、页脚

在 CSS 中将容器的宽度更改为 90% 或更小（左边距为 1%），因为 navigator 是 10% 它们加起来应该是 100%