CSS布局问题边框

我目前在下列网站工作为客户http://minta.jvsoftware.com/但我试图使顶部和主容器div的底部边框，看起来像这样http://awesomescreenshot.com/0f8jdwn71基本上使边界跨越到直到屏幕的末端（不要介意这个红色应该和现在的边框颜色相同）。CSS布局问题边框

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

任何人都可以帮助我吗？提前致谢！

来源

2011-08-29 javiervd

我想你可能应该检讨你的标记结构。如果你想扩展那个特殊的div，你需要填充和定位，而不是一个浮点数。据我所见，无论如何。 – Kyle

如果你可以把结构放在jsfiddle.net上，我可能会为你做到这一点。 –

嗨，萨米尔这基本上是我得到的http://jsfiddle.net/KwYMU/我需要的是顶部和底部的边界“strech”一直到屏幕的左侧。 – javiervd

底部您可以通过带有负边距的纯CSS实现此目的。

首先，你必须更新的CSS .container如下：

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

这里一个截图帮你弄明白： enter image description here

来源

2011-08-29 09:29:55 Skorpioh

感谢您的输入，我会尽力并让您知道 – javiervd

伟大的工作！虽然我认为如果分辨率足够宽，边界将不会一直向左边，因为您使用的是2000px，但现在应该是好的:) – javiervd

达到你想要的布局，我认为你必须把左边的div容器旁边，让他们漂浮离开，并给这个div顶部的边框，并用红色

来源

2011-08-29 09:03:55

为什么你不使用“position：absolute”？在这种情况下，我猜想它是完美的解决方案。

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

来源

2011-08-29 10:18:36 Nadin

我不能这样做，因为根据屏幕分辨率的不同，我不喜欢不知道左侧有多少空间可用 – javiervd

CSS布局问题边框

回答

相关问题