如何設置邊境一個div寬度固定寬度的div

如何設置一個div width與border: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>

來源

2017-08-29 LKG

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

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

只需添加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>

來源

2017-08-29 11:01:55

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

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

試試這個，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>

來源

2017-08-29 11:02:08 codesayan

只需添加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可能會破壞佈局的其他部分。

來源

2017-08-29 11:04:25 curveball

.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>

來源

2017-08-29 11:04:31

-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>

}

來源

2017-08-29 11:26:01

如何設置邊境一個div寬度固定寬度的div

回答

相關問題