具有等間距div的流體寬度我有一個流體寬度容器DIV。在這里面我有4個div所有300 px250px.。<div id="container">
<div class="box1"> </div>
<div class="box2"> </div>
<div class="box3"> </div>
<div class="box4"> </div></div>我想要發(fā)生的是框1向左浮動，方框4向右浮動，方框2和3之間間隔均勻。我希望空間也是流動的，所以瀏覽器越小，空間也就越小。
3 回答
翻翻過去那場雪
TA貢獻(xiàn)2065條經(jīng)驗 獲得超14個贊
calc()
案例1：在一行( 小提琴 )
div{
height: 100px;
float: left;
background:pink;
width: 50px;
margin-right: calc((100% - 300px) / 5 - 1px); }div:last-child{
margin-right:0;}案例2：在多行( 小提琴 )
calc()media queries
@min-margin: 15px;@div-width: 150px;@3divs: (@div-width * 3);@4divs: (@div-width * 4);@5divs: (@div-width * 5);@6divs: (@div-width * 6);@
7divs: (@div-width * 7);@3divs-width: (@3divs + @min-margin * 2);@4divs-width: (@4divs + @min-margin * 3);@5divs-width: (@5divs + @min-mar
gin * 4);@6divs-width: (@6divs + @min-margin * 5);@7divs-width: (@7divs + @min-margin * 6);*{margin:0;padding:0;}.container{
overflow: auto;
display: block;
min-width: @3divs-width;}.container > div{
margin-bottom: 20px;
width: @div-width;
height: 100px;
background: blue;
float:left;
color: #fff;
text-align: center;}@media (max-width: @3divs-width) {
.container > div {
margin-right: @min-margin;
}
.container > div:nth-child(3n) {
margin-right: 0;
}}@media (min-width: @3divs-width) and (max-width: @4divs-width) {
.container > div {
margin-right: ~"calc((100% - @{3divs})/2 - 1px)";
}
.container > div:nth-child(3n) {
margin-right: 0;
}}@media (min-width: @4divs-width) and (max-width: @5divs-width) {
.container > div {
margin-right: ~"calc((100% - @{4divs})/3 - 1px)";
}
.container > div:nth-child(4n) {
margin-right: 0;
}}@media (min-width: @5divs-width) and (max-width: @6divs-width) {
.container > div {
margin-right: ~"calc((100% - @{5divs})/4 - 1px)";
}
.container > div:nth-child(5n) {
margin-right: 0;
}}@media (min-width: @6divs-width){
.container > div {
margin-right: ~"calc((100% - @{6divs})/5 - 1px)";
}
.container > div:nth-child(6n) {
margin-right: 0;
}}text-align:justify
添加回答
舉報
0/150
提交
取消