html>

試驗浮動元素水平居中

.div1,

.div2?{

border:?1px?solid?black;

width:?900px;

height:?500px;

}

.f?{

float:?left;

}

.center?{

margin-left:?50%;

width:?1px;

height:?30px;

border-left:?1px?solid?green;

position:?relative;

}

.float1?{

background-color:?#ddd;

width:?100px;

height:?100px;

position:?relative;

left:?-50px;

margin-left:?50%;

}

.float2,

.float3?{

padding:?30px;

border:?1px?solid?red;

}

測試內容我是內容撐開部分

$(function()?{

var?sumWidth?=?$(".float2").outerWidth()?+?$(".float3").outerWidth();

var?left?=?-(sumWidth?/?2);

$(".float2").css({

"position":?"relative",

"margin-left":?"50%",

"left":?left?+?"px"

});

$(".float3").css({

"position":?"relative",

"left":?left?+?"px"

});

});

總結

以上是生活随笔為你收集整理的html多个盒子重叠浮动,如何让浮动后的多个盒子水平居中的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。