2017-08-29 17 views
0

如何設置一個div widthborder:2px solid邊境從父DIV出來如何設置邊境一個div寬度固定寬度的div

注: - 我想在IE修復也。

發表示例以更好地低估。

.box { 
 
    width: 300px; 
 
    border: 1px solid; 
 
    padding: 10px 0; 
 
} 
 

 
.one { 
 
    width: 100%; 
 
    background: tomato; 
 
    height: 40px; 
 
} 
 

 
.two { 
 
    width: 100%; 
 
    border: 2px solid; 
 
    height: 40px; 
 
}
<div class="box"> 
 
    <div class="one"></div> 
 
    <div class="two"></div> 
 
</div>

+1

那麼只是刪除寬度然後(DIV爲塊元件自動進行全寬,所以在這種情況下它不是必需的) - o r閱讀'box-sizing'屬性。 – CBroe

+0

你的問題很難理解。請添加更多信息。 –

回答

1

只需添加display: block;到該分區。檢查更新摘錄如下

.box { 
 
    width: 300px; 
 
    border: 1px solid; 
 
    padding: 10px 0; 
 
} 
 

 
.one { 
 
    width: 100%; 
 
    background: tomato; 
 
    height: 40px; 
 
} 
 

 
.two { 
 
    display: block; 
 
    border: 2px solid; 
 
    height: 40px; 
 
}
<div class="box"> 
 
    <div class="one"></div> 
 
    <div class="two"></div> 
 
</div>

+2

爲什麼你需要將'display:block'添加到div? div是一個塊元素。你的代碼工作,因爲你已經刪除了'width:100%' – Turnip

+0

@Super用戶我會接受你的答案,因爲它的工作原理,並且不需要爲IE編寫任何css ..感謝buddy .. – LKG

1

試試這個,box-sizing屬性可以解決售後服務您的問題。

*, *:before, *:after {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } 
 
.box { 
 
    width: 300px; 
 
    border: 1px solid; 
 
    padding: 10px 0; 
 
} 
 

 
.one { 
 
    width: 100%; 
 
    background: tomato; 
 
    height: 40px; 
 
} 
 

 
.two { 
 
    width: 100%; 
 
    border: 2px solid; 
 
    height: 40px; 
 
}
<div class="box"> 
 
    <div class="one"></div> 
 
    <div class="two"></div> 
 
</div>

1

只需添加box-sizing: border-box;.two這樣的:

.box { 
 
    width: 300px; 
 
    border: 1px solid; 
 
    padding: 10px 0; 
 
} 
 
.one { 
 
    width: 100%; 
 
    background: tomato; 
 
    height: 40px; 
 
} 
 

 
.two { 
 
    width: 100%; 
 
    border: 2px solid; 
 
    height: 40px; 
 
    box-sizing: border-box; 
 
}
<div class="box"> 
 
    <div class="one"></div> 
 
    <div class="two"></div> 
 
</div>

沒有華麗的技巧。請注意,如上所示,將box-sizing: border-box;添加到*, *:before, *:after可能會破壞佈局的其他部分。

3

.box { 
 
    width: 300px; 
 
    border: 1px solid; 
 
    padding: 10px 0; 
 
} 
 

 
.one { 
 
    width: 100%; 
 
    background: tomato; 
 
    height: 40px; 
 
} 
 

 
.two { 
 
    width: 100%; 
 
    border: 2px solid; 
 
    height: 40px; 
 
box-sizing: border-box; 
 
}
<div class="box"> 
 
    <div class="one"></div> 
 
    <div class="two"></div> 
 
</div>

-1
<div class="box"> 
<div class="one"></div> 
<div class="two"></div> 
</div> 

.box { 
width: 300px; 
border: 1px solid; 
padding: 10px 0; 
} 

.one { 
width: 100%; 
background: tomato; 
height: 40px; 
} 

.two { 
width: 296px; 
border: 2px solid; 
height: 40px; 

.box { 
 
    width: 300px; 
 
    border: 1px solid; 
 
    padding: 10px 0; 
 
    } 
 

 
.one { 
 
    width: 100%; 
 
    background: tomato; 
 
    height: 40px; 
 
} 
 

 
.two { 
 
    width: 296px; 
 
    border: 2px solid; 
 
    height: 40px; 
 
}
<div class="box"> 
 
    <div class="one"></div> 
 
    <div class="two"></div> 
 
</div>

}