時(shí)間：2023-09-02 23:12:02 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)
時(shí)間：2023-09-02 23:12:02 來(lái)源：網(wǎng)站運(yùn)營(yíng)
幾種常用的響應(yīng)式布局方案：
在線咨詢
float布局float<body> <div class="left"></div> <div class="right"></div> <div class="center"></div></body><style> .left { background-color: pink; width: 100px; float: left; height: 500px; } .right { background-color: blueviolet; width: 100px; float: right; height: 500px; } .center { height: 500px; overflow: hidden; background-color: yellowgreen; }</style>流體布局margin<body> <div class="left"></div> <div class="right"></div> <div class="center"></div></body><style> .left { background-color: pink; width: 100px; height: 500px; float: left; } .right { background-color: blueviolet; width: 100px; height: 500px; float: right; } .center { height: 500px; margin: 0 100px; background-color: yellowgreen; }</style>圣杯布局padding預(yù)留左右兩側(cè)。margin和相對(duì)left移動(dòng)到同一行。<body> <div class="container"> <div class="center"></div> <div class="left"></div> <div class="right"></div> <div style="clear: both;"></div> </div></body><style> .container { min-width: 800px; padding-left: 200px; padding-right: 200px; } .center { float: left; background-color: tomato; height: 500px; width: 100%; } .left { float: left; background-color: yellowgreen; width: 200px; height: 500px; position: relative; margin-left: -100%; left: -200px; } .right { float: left; background-color: pink; width: 200px; height: 500px; margin-left: -200px; position: relative; right: -200px; }</style>問(wèn)題：為什么設(shè)置左右是position:relative？position:fixed/absolute時(shí)元素已脫離文檔流，float失效。position:relative/static時(shí)元素正常位于文檔流，float有效。margin來(lái)?yè)伍_(kāi)寬度。relative的位置，只需使用負(fù)值margin調(diào)整至同一欄即可<body> <div class="container"> <div class="center"></div> </div> <div class="left"></div> <div class="right"></div></body><style> body{ min-width: 400px;; } .container { float: left; width: 100%; } .center { height: 500px; background-color: tomato; margin-left: 200px; margin-right: 200px; } .left { height: 500px; float: left; width: 200px; background-color: thistle; margin-left: -100%; } .right { height: 500px; float: left; width: 200px; background-color: turquoise; margin-left: -200px; }</style><body> <div class="container"> <div class="center"></div> <div class="left"></div> <div class="right"></div> </div></body><style> .container { display: flex; } .center { flex: 1 1 200px; background-color: turquoise; height: 500px; } .left { order: -1; flex: 0 0 200px; height: 500px; background-color: thistle; } .right { flex: 0 0 200px; height: 500px; background-color: wheat; }</style>position。左右絕對(duì)定位到邊緣。中間使用margin撐開(kāi)。<body> <div class="container"> <div class="left"></div> <div class="center"></div> <div class="right"></div> </div></body><style> .container { position: relative; } .center { margin: auto 200px; background-color: turquoise; height: 500px; } .left { position: absolute; left: 0; top: 0; width: 200px; height: 500px; background-color: thistle; } .right { position: absolute; right: 0; top: 0; width: 200px; height: 500px; background-color: wheat; }</style>網(wǎng)格Grid布局CSS3新增的grid布局。<body> <div class="container"> <div style="background-color: wheat;"></div> <div style="background-color: turquoise;"></div> <div style="background-color: tomato;"></div> </div></body><style> .container { display: grid; grid-template-columns: 200px auto 200px; grid-template-rows: 200px; }</style>猛虎分享關(guān)鍵詞：布局,方案,響應(yīng)
客戶&案例
營(yíng)銷資訊
關(guān)于我們
客戶&案例
營(yíng)銷資訊
關(guān)于我們
微信公眾號(hào)
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。
