Question

这是我的第一个问题，请温柔。

我是HTML和CSS的新手，我正在努力实现一些看似超出我技能的东西。

我遇到这种情况：我需要制作一个带有左固定导航栏的页面和一个带有固定宽度项目的画廊的右侧部分。

<div class="left"> <div class="logo"> </div></div> 

<div class="right">

<div class="item"> </div><div class="item"> </div><div class="item"> </div><div class="item"> </div>
<div class="item"> </div><div class="item"> </div><div class="item"> </div><div class="item"> </div>
<div class="item"> </div><div class="item"> </div><div class="item"> </div><div class="item"> </div>
<div class="item"> </div><div class="item"> </div><div class="item"> </div><div class="item"> </div>
<div class="item"> </div><div class="item"> </div><div class="item"> </div><div class="item"> </div>


</div>

正确的部分没有看到物品已经结束，所以那里出现了鬼魂＆＃39;即使他们使用百分比作为宽度，也可以在中间部分。

我尝试过在其他讨论中找到的任何内容，但它们似乎不适用于我的示例，其布局略有不同。

我想知道是否有一些基本的东西我错过了你可能会帮助我。谢谢你的耐心等待。

Answer 1

很难将固定元素与百分比和像素混合在一起。

您不仅需要容器.right为百分比，而且还需要内容具有百分比宽度。很遗憾，您仍需要在px，em或rem中声明高度。

您可能需要查看Bootstrap，因为它们会处理因使用百分比而导致的许多问题。

我认为这就是你所追求的：http://jsfiddle.net/2c2e8j86/

.logo {
    margin:0 auto;
    background-color:#97CC66;
    width:110px;
    height:110px;
    margin-top:150px;
}

.left {
    background-color:#000;
    width:19%;
    position:fixed;
    height:1400px;
}

.right { 
    background-color:#FFF;
    width:78.5%;
    margin-left: 19.5%;
}

.item {
    width:25%;
    float:right;
}

.item-inner {
    margin: 0 0 2px 2px;
    background-color:#C7003F;
    height:138px;
}

您需要在容器内部的.item之间留出空隙，以便添加额外的.item-inner div。

修复了具有固定大小项目的导航栏和右侧图库

1 个答案: