<!DOCTYPE html><html><head> <title></title></head><style type="text/css"> .a{ width: 1000px; background-color: #333; overflow: auto; } .z{ width: 33.3333%; float: left; height: 100px; border: 1px solid red; } .x{ width: 33.3333%; height: 100px; float: left; border: 1px solid yellow; } .c{ width: 33.3333%; height: 100px; float: left; border: 1px solid #fff; }</style><body><div class="a"> <div class="z"></div> <div class="x"></div> <div class="c"></div></div></body></html>在不影響寬度的情況下 ? ?讓div。c ?浮動(dòng)上去。 ?我依稀記得有一條屬性可以做到，現(xiàn)在不記得了
6 回答
愁晴
TA貢獻(xiàn)4條經(jīng)驗(yàn) 獲得超2個(gè)贊
<!DOCTYPE html>
<html>
<head>
? ? <meta charset="UTF-8">
? ? <title></title>
? ? <style type="text/css">
? ? ? ? .a{
? ? ? ? ? ? width: 1000px;
? ? ? ? ? ? background-color: #333;
? ? ? ? ? ? overflow: auto;
? ? ? ? ? ??
? ? ? ? ? ? -webkit-columns:3;
? ? ? ? ? ? -moz-columns:3;
? ? ? ? ? ? columns:3;
? ? ? ? ? ? -webkit-column-gap:0;
? ? ? ? ? ? -moz-column-gap:0;
? ? ? ? ? ? column-gap:0;
? ? ? ? }
? ? ? ? .z{
? ? ? ? ? ? height: 100px;
? ? ? ? ? ? border: 1px solid red;
? ? ? ? }
? ? ? ? .x{
? ? ? ? ? ? height: 100px;
? ? ? ? ? ? border: 1px solid yellow;
? ? ? ? }
? ? ? ? .c{
? ? ? ? ? ? height: 100px;
? ? ? ? ? ? border: 1px solid #fff;
? ? ? ? }
? ? </style>
</head>
<body>
<div>
? ? <div></div>
? ? <div></div>
? ? <div></div>
</div>
</body>
</html>
這是代碼！
一步十年
TA貢獻(xiàn)11條經(jīng)驗(yàn) 獲得超0個(gè)贊
邊框也算寬，3條邊框總共占了6px,3個(gè)百分比+6px總長(zhǎng)超盒子1000px了，在不影響寬度的情況下 ? ?讓div。c ?浮動(dòng)。把邊框改成background顏色就行了，如果你硬要那樣弄是無(wú)法實(shí)現(xiàn)，代碼問(wèn)題。再說(shuō)寬度搞百分比小數(shù)個(gè)人覺(jué)得好奇怪，根本就達(dá)不到前端精確的要求、要么改成
<style type="text/css">
.a{
width: 1000px;
background-color: blue;
}
.z{
width: 30%;
float: left;
height: 100px;
border: 1px solid red;
}
.x{
width: 394px;
height: 100px;
float: left;
border: 1px solid yellow;
}
.c{
width: 30%;
height: 100px;
float: left;
border: 1px solid green;
}
</style>
body部分不變，你看下吧
X_xiaob
TA貢獻(xiàn)2條經(jīng)驗(yàn) 獲得超0個(gè)贊
你確定你的CSS有錯(cuò)誤 ? ? ? ? ?33.333%*3=99.999 ? ? ?但是你的子DIV中有邊框啊1px*3 ?
添加回答
舉報(bào)
0/150
提交
取消