如何讓這個div邊框一直圍繞着整個div

我有這個頁面，我想要一個邊框繞着主div移動。由於某種原因，它沒有這樣做。請幫助我。如何讓這個div邊框一直圍繞着整個div

這裏是頁的圖：

enter image description here

下面是代碼：

<div id="main"> 

    <section id="primary"><div id="content" role="main"><div id="breadcrumb"><a class="home" href="http://www.bolistylus.com">Home</a> &rsaquo; <a href="http://www.bolistylus.com/shop/">Shop</a></div> 
       <h1 class="page-title">All Products</h1> 

     <div class="entry-content"> 
    <h1 class="description-title">WHY IS BOLI BETTER?</h1> 
    <div class="feature feature-item-248"><img class="main" src="http://www.bolistylus.com/wp-content/uploads/uclaproduct.png" alt="" /></p> 
    <div class="feature_description"> 
    <div class="feature_description_header"> 
    <h2 class="descript-heading">PERFECTLY WEIGHTED</h2> 

    </div> 
    <div class="feature_description_content"> 
    <p>Touch screens have simplified technology, but there has yet to be a way to capture the precision of a calligrapher or the stroke of an artist. Not only should it meet your needs, but a stylus should have style.</p> 
    </div> 
    </div> 
    </div> 
    <div class="feature feature-item-252"><img class="main" src="http://www.bolistylus.com/wp-content/uploads/pinkproduct.png" alt="" /></p> 
    <div class="feature_description"> 
    <div class="feature_description_header"> 
    <h2 class="descript-heading">PEN-LIKE PRECISION</h2> 
    </div> 
    <div class="feature_description_content"> 
    <p>Your stylus should be as sharp as your ideas. The thin and clear disc gives you the accuracy you want in a digital pen.</p> 
    </div> 

    </div> 
    </div> 
    <div class="feature feature-item-254"> 
    <p><img class="main" src="http://www.bolistylus.com/wp-content/uploads/blueproduct.png" alt="" /></p> 
    <div class="feature_description"> 
    <div class="feature_description_header"> 
    <h2 class="descript-heading">BALL POINT</h2> 
    </div> 
    <div class="feature_description_content"> 
    <p>Hold your stylus at the angle you’re most comfortable with. Jot gives you the freedom to write or sketch like you’re used to.</p> 
    </div> 
    </div> 
    </div> 
    <div class="feature feature-item-256"> 
    <p><img class="main" src="http://www.bolistylus.com/wp-content/uploads/greenproduct.png" alt="" /></p> 

    <div class="feature_description"> 
    <div class="feature_description_header"> 
    <h2 class="descript-heading">HEAVY METAL</h2> 
    </div> 
    <div class="feature_description_content"> 
    <p>Once Jot is in your grip, the quality is unmistakable. The durable aluminum and steel gives Jot superior conductivity and craftsmanship comparable to any luxury pen.</p> 
    </div> 
    </div> 
    </div> 
    </div> 


    [1]: http://i.stack.imgur.com/CYrQv.png

這是因爲要求的CSS：

.entry-content .feature_description { 
    float: left; 
    padding-bottom: 20px; 
    position: relative; 
    width: 400px; 
} 

.entry-content .feature_description_header { 
    padding-bottom: 8px; 
} 

.entry-content .feature_description_content { 
    font-size: 18px; 
    line-height: 21.3px; 
    margin-bottom: 8px; 
    margin-top: 0; 
} 

.entry-content .back_2_top { 
    bottom: 0; 
    color: #A4A5A7; 
    font-size: 11px; 
    position: absolute; 
} 

.descript-heading { 
    font-size: 24px; 
} 

.entry-content .feature_description_header { 
    margin-top: -20px; 
    padding-bottom: 8px; 
} 

.description-title { 
    font-size: 38px; 
} 

.entry-content, .entry-summary { 
    border: 3px solid #000000; 
    padding: 0.63em 0 0 1.63em; 
}

來源

2012-01-10 novicePrgrmr

您需要向我們展示適當的CSS。 – 2012-01-10 07:05:44

我懷疑你正在爲項目塊使用'float' – 2012-01-10 07:05:59

的最後一個子看起來你需要一個clearfix後添加類似

<div style="clear: both;">&nbsp;</div>

。這種加入哪個元素有邊界：

elementWithBorder { 
    overflow: hidden; 
}

我假設它是有邊界，需要clearfix，那.feature元素是浮動的.entry-content元素。

clearfix前： http://jsfiddle.net/ZbhVP/

clearfix後： http://jsfiddle.net/ZbhVP/1/

當非浮動元素的孩子都提出了這種可能發生。最終，您可能想要使用更多跨瀏覽器的clearfix方法，但這應該在現代瀏覽器中運行。

來源

2012-01-10 07:12:00

請注意：如果您要添加額外的HTML元素來實現clearfix，那麼您就錯了。所有你需要的是CSS。 – 2012-01-10 07:21:55

這一個工作在jsfiddle中：

#main {border: 10px solid black;}

http://jsfiddle.net/lvil/jVE6L/

來源

2012-01-10 07:06:06 lvil

這實際上是在整個主div上放一個邊框。我希望它只出現在入口內容 – novicePrgrmr 2012-01-10 07:11:03

抱歉誤會 – lvil 2012-01-10 07:14:11

我還在你的問題中讀到_「我想要一個邊界繞主要div去_」，不是嗎？ – 2012-01-10 07:20:21

它看起來像一個漂浮的問題。
主要（.feature）div will not affect his box model的子（如果它們是浮動的）。
如果需要上浮無論如何，你需要的主要DIV

來源

2012-01-10 07:09:15

如何讓這個div邊框一直圍繞着整個div

回答

相關問題