嵌套div容器變大，然後父元素

我只是試圖創建嵌套元素，但內部元素（子類）總是變大，然後是父元素（類別）。嵌套div容器變大，然後父元素

請看看這的jsfiddle：

的jsfiddle：http://jsfiddle.net/d7vhpcmt/

HTML：

<div id="content" class="clearfix"> 
    <section class="category boxed"> 
     <section class="box_1"><header class="trigger trigger_aktiv"><h2>Category</h2></header> 
      <div class="content"> 
       <section class="box_1 boxed"><header class="trigger"><h2>Subcategory</h2></header> 
        <div class="content"></div> 
       </section> 
      </div> 
     </section> 
    </section> 
</div>

CSS：

.category { 
    background-color: #f8f8f8; 
    padding: 20px; 
    margin-bottom: 10px; 
    width: 100%; 
    max-width: 1600px; 
    float: left; 
    margin-right: 10px; } 
    .category a { 
     color: #262626; 
     text-decoration: none; 
     border-bottom: 0; 
     background-color: transparent; 
     display: block; 
     width: 100%; } 
    .category h1 { 
     font-size: 2.0em; 
     margin: 0 0 0.5em 0; 
     font-weight: 300; 
     line-height: 1em; 
     color: #262626; 
     letter-spacing: -1px; } 

.box_1 { 
    background-color: #E9E9E9; 
    margin-top: 5px; 
    border: 1px solid #E2E2E2; 
    display: block; 
    width: 100%; } 
    .box_1:hover { 
     background-color: #eee; } 
    .box_1 header { 
     padding: 5px 0 0 50px; } 
    .box_1 .content { 
     background-color: #f2f2f2; 
     height:100%; 
     padding: 0.2em 0 0 0; } 
     .box_1 .content p { margin: 0.5em 0.8em; } 
     .box_1 .content h3 { 
      font-size: 1.2em !important; 
      margin-left: 0.3em; } 
     .box_1 .content .box_1 { 
      margin: 5px; }

來源

2014-08-28 user3142695

嘗試 - http://jsfiddle.net/d7vhpcmt/1/ – Anonymous 2014-08-28 08:24:59

但subcategroy應該與下面的文章容器一樣寬。 – user3142695 2014-08-28 08:27:33

這是因爲您給出了.box_1它的寬度爲100％，而.content .box_1和margin爲5px;這意味着你的盒子將是100％+ 10px的 - 而不是使用保證金嘗試添加填充到父容器，這樣你就不需要繼續增加5px的保證金給所有它的孩子：

.box_1 .content { 
    background-color: #f2f2f2; 
    height:100%; 
    padding: 0.2em 5px 0 5px; 
}

Example

來源

2014-08-28 08:35:38 Pete

如果您不擔心IE8，請在box_1類中使用calc。

.box_1 { 
background-color: #E9E9E9; 
margin-top: 5px; 
border: 1px solid #E2E2E2; 
display: block; 
width: calc(100% - 10px); 
}

DEMO

來源

2014-08-28 08:30:47

也不可能爲IE8解決這個問題嗎？ – user3142695 2014-08-28 08:31:50

的問題是在這段代碼：

.box_1 .content .box_1 { 
    margin: 5px; 
}

您正在施加margin周圍含有Subcategori的整個截面。只需使用這種方式編輯：

.box_1 .content .box_1 { 
    margin: 5px 0; 
}

爲了去除右邊和左邊的邊距。

這裏是JSFiddle。

來源

2014-08-28 08:33:49 Overflowh

嵌套div容器變大，然後父元素

回答

相關問題