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

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

在CSS中将容器的宽度更改为90％或更低（剩余边距将占1％），因为导航器为10％他们应该加起来100％

Answer 2

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

如果向右浮动.container并将其宽度设置为83％，您将获得所需的效果。为什么83％？ .left-sidebar的宽度为10％加上7％的边距=侧边宽度的17％。即使经过这次调整，我担心它可能并不完美，因为.container上的10％上边距和.content上的左边填充270px和.left-sidebar上的4％上边距可能不会是你的意图。

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

让我借此机会介绍使用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时，使用width属性指定的总宽度为100px = 10px + 90px + 10px。如果你说某些东西应该是XXX宽度，它将包括填充，边距等。

Should you use box-sizing: border-box?

添加内容时，补充工具栏会一直消失

2 个答案: