Question

我想知道两件事 - A）当窗口很小并且滚动时，如何防止侧栏重叠简历的文本？我希望侧边栏垂直滚动，但不能水平滚动。

B）如何在边距的不同部分添加小按钮？我想添加一些小按钮去我的博客，Twitter等。

Answer 1

我认为你需要javascript来正确地做到这一点。

尝试将其粘贴在您的头部并将您的css #sidebar更改为position：absolute;

<script type="text/javascript">
  window.onscroll = moveEle;
  function moveEle() {

    //Alter top to be how many pixels you want from the top of the window
    var top = 50;

    ele = document.getElementById('sidebar');

    if(document.body && document.body.scrollTop) {
      ele.style.top = (document.body.scrollTop + top) + "px";
    } else if(document.documentElement && document.documentElement.scrollTop) {
     ele.style.top = (document.documentElement.scrollTop + top) + "px";
    }
  }
</script>

哦，按钮，你可以在侧边栏中放置一些锚标签，同时href指向你在twitter上的任何地址。用display：block然后进一步调整样式。您可以使用任何背景颜色和边框或背景图像使它们成为您想要的尺寸。

Answer 2

我的Buttons方法不是创建单独的类，而是创建<div>。

#navigation{margin-top:-50px}

现在，该导航中的所有按钮和所有内容都将是-50px到顶部。但是，它变得更好！

#navigation .littledifference{margin-top:-35px !important}

现在，您可以在该导航中设置按钮（或再次，任何内容）以使用此类，并且边距将不同！这节省了对每个按钮的额外编码。

Psyrus上面说的

编辑，你也可以使用<a>标签。这需要我自己亲身经历的大量工作，尽管你可以用它们做任何事情。我的上述系统应该仍然有效 - 只需确保<a>标记仍在#navigation内，并且没有相互冲突的margin属性。类选择器仍然可以正常工作。

Answer 3

您应该使用％value。

#wrap{width:100%; max-width:1024px;}
#sidebar{width:15%;}
#main{width:80%; padding:10px 2.5%;}

这样，当您调整窗口大小时，您的内容大小将会因此而调整。所以他们不会重叠。

Answer 4

为防止重叠，您可以对特定的填充和边距使用负值和正值，以便可以将任何<div>放置在所需的任何位置。需要牢记的一点是，可以给负值和设置填充和边距时为负百分比


    .ClassName
    {
    padding-left:-20px;
    padding-top:-10%;
    }

两个简单的HTML / CSS问题

4 个答案: