html - 带边框的 CSS 布局问题

Question

我目前正在以下站点为客户工作http://minta.jvsoftware.com/但我正在尝试使主容器的顶部和底部边框div看起来像这样http://awesomescreenshot.com/ 0f8jdwn71基本上使边框从左侧跨越到屏幕的末端（不要介意红色，这应该与我现在的边框颜色相同）。

我一直在尝试提出一个解决方案，但到目前为止我失败了，如果仅使用 css 实现它变得太难，我愿意尝试一个 JS/jQuery 解决方案。

谁能帮我？提前致谢！

Answer 1

您可以通过具有负边距的纯 CSS 来实现这一点。

首先，您必须按如下方式更新 .container 的 CSS：

.container {
  clear: both;
  font-family: "Times New Roman",Times,serif;
  margin: 124px auto 36px;
  padding: 0;
  width: 940px;
}

现在将主 div 的内容包装到另一个 div 并应用一些 css，如下所示：

<div id="main" class="container clearfix" role="main">
    <div style="border: 1px solid red; margin-left: -2000px; padding: 8px 8px 8px 2000px;">
        <div class="content"> ... </div>
        <div class="featured-image"> ... </div>
        <div style="clear:both;"></div>
    </div>
</div>

这里有一个截图可以帮助你弄清楚：

Answer 2

为了实现您想要的布局，我认为您必须在容器 div 旁边的左侧放置 a 并使它们向左浮动，并为该 div 提供顶部和底部的红色边框

Answer 3

为什么不使用“位置：绝对”？在这种情况下，我猜这是完美的解决方案。

<style>
.topborder,
.bottomborder {
  position:absolute;
  left:-100px;
  width:150px;
  height:3px;
  background:#ff0000;
  z-index:999;
}

.topborder {
  top:-3px;
}

.bottomborder {
  bottom:-3px;
}

#main {
  position:relative;
}
</style>

<div id="main" class="container clearfix" role="main">
  <div class="topborder"></div><div class="bottomborder"></div>

  your content

</div>