2012-07-29 92 views
1

在我的网站上http://goo.gl/BcJtC“关于我们”部分我想在我的activity-left div的右侧使用细灰色边框,与activity-right div分隔开。 不幸的是,使用我当前的代码它不起作用。任何想法?
感谢未显示CSS右侧边框

HTML代码:

<div class="section" id="plan-activite"> 
    <div id="activity-container"> 
     <div id="activity-left"><span class="activity-title">About Us</span><br /><img src="images/planet-water.jpg" class="activity-planet" alt="Picture" /></div> 
     <div id="activity-right"><p><span class="activity-conclusion">XYZ, khkhkhk, ren natur</span></p><br /><p>XXZ AS was founded 2011sdqsd.</p><br/> 
     </div> 
    </div> 
</div><!--END page3--> 

CSS代码:

#activity-container { 
    width:90%; 
    background-color:#FFFFFF; 
    Height:400px; 
    margin-left: auto; 
    margin-right: auto; 
    opacity:0.95; 
    filter:alpha(opacity=95); /* For IE8 and earlier */ 
    border: 1px solid #efefef; 
    background: #fff; 
    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset; 
    -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset; 
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset; 
} 
#activity-left { 
    color:#000; 
    margin: 0 auto; 
    border-style:solid; 
    border-right-color:#666; 
    padding:15px; 
    width: 30%; 
    float: left; 
    position: relative; 
} 
#activity-right { 
    font:12px 'Open Sans', "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
    font-weight:400; 
    margin: O auto; 
    padding:15px; 
    color:#000; 
    width: 60%; 
    float: left; 
    position: relative; 
    text-align:justify; 
    -moz-column-count: 1; 
    -moz-column-gap: 1.5em; 
    -moz-column-rule: 1px solid #c4c8cc; 
    -webkit-column-count: 1; 
    -webkit-column-gap: 1.5em; 
    -webkit-column-rule: 1px solid #c4c8cc; 
} 
.activity-planet { 
    text-align:center; 
    margin-top:20px; 
    margin-left:20px; 
} 

回答

0

添加border: 1px solid #000#activity-left。这个对我有用。

尽管我会为#activity-rightborder-left: 1px solid #000,因为这将会一直延伸下去。

+0

很好 - 谢谢! – Greg 2012-07-29 17:07:11

+0

实际上,只是注意到边框不会一直向下(底部有几个px)。你会知道如何解决这个问题吗? (你可以看看链接 - 已经上传了一个新版本)谢谢 – Greg 2012-07-29 17:14:32

+0

这是因为#活动权不像包含div那么高,在它的高度添加几个像素直到它工作(或者,使用高度:100%;与包含的div具有相同的高度 – Andy 2012-07-29 17:16:08

0

边界声明由三部分组成:color,stylewidth属性。 风格宽度是强制性的,与颜色是可选的(如果没有提供继承文本颜色)。

这些属性可以使用-left-right-top-bottom后缀进行更具体的,因为你已经做了颜色财产。

因此,目前,您所缺少的只是宽度声明,以便拥有右侧边框。但是,这样做的麻烦在于,因为您已经为整个<div>设置了一个通用风格,因此添加border-width: 1px将为其他三面赋予默认颜色的边框。

为了解决这个问题,您可以使用速记声明并且一次性给右边的所有3个属性(border-right: 1px solid #000;)。