未顯示CSS右側邊框

在我的網站上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; 
}

來源

2012-07-29 Greg

添加border: 1px solid #000到#activity-left。這個對我有用。

儘管我會爲#activity-right做border-left: 1px solid #000，因爲這將會一直延伸下去。

來源

2012-07-29 17:01:33 Andy

很好 - 謝謝！ – Greg 2012-07-29 17:07:11

實際上，只是注意到邊框不會一直向下（底部有幾個px）。你會知道如何解決這個問題嗎？（你可以看看鏈接 - 已經上傳了一個新版本）謝謝 – Greg 2012-07-29 17:14:32

這是因爲＃活動權不像包含div那麼高，在它的高度添加幾個像素直到它工作（或者，使用高度：100％;與包含的div具有相同的高度 – Andy 2012-07-29 17:16:08

邊界聲明由三部分組成：color,style和width屬性。風格和寬度是強制性的，與顏色是可選的（如果沒有提供繼承文本顏色）。

這些屬性可以使用-left，-right，-top和-bottom後綴進行更具體的，因爲你已經做了顏色財產。

因此，目前，您所缺少的只是寬度聲明，以便擁有右側邊框。但是，這樣做的麻煩在於，因爲您已經爲整個<div>設置了一個通用風格，因此添加border-width: 1px將爲其他三面賦予默認顏色的邊框。

爲了解決這個問題，您可以使用速記聲明並且一次性給右邊的所有3個屬性（border-right: 1px solid #000;）。

來源

2012-07-29 17:15:43 anotherdave

未顯示CSS右側邊框

回答

相關問題