CSS 布局与边框的问题

发布于 2024-12-01 21:44:04 字数 399 浏览 5 评论 0原文

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

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

谁能帮助我吗？提前致谢！

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

帅气称霸 2024-12-08 21:44:04

您可以通过带有负边距的纯 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>

这里有一个屏幕截图可以帮助您弄清楚：
在此处输入图像描述

You can achieve this by pure CSS with negative margins.

First you have to update the CSS for .container as follows:

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

Now wrap the content of the main div into another div and apply some css like this:

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

Here a screenshot to help you figure it out:
enter image description here

回复收藏 0 原文

谈情不如逗狗 2024-12-08 21:44:04

为了实现你想要的布局，我认为你必须在容器div旁边放置一个，让它们向左浮动，并给这个div的顶部和底部边框加上红色

回复收藏 0 原文

如何视而不见 2024-12-08 21:44:04

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

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

Why you don't use "position:absolute"? In this case it's perfect solution I guess.

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

回复收藏 0 原文

~没有更多了~