兩個DIV並排顯示
阿新 • • 發佈：2017-05-30
ext content head wid con 做的 solid 一個 ges
今天做的一個項目，需要做3個div，一個是總框（Div1），另外兩個是子框，按比例填滿div1，我設置好兩個div的width和height，發現效果是兩個子div上下顯示，如圖所示：
要想將兩個DIV並排顯示，需要用到float屬性，將div2的float設置為left，將div3的float設置為right，運行就達到了想要的效果
值得一提的是，如果div2和div3的width值相加等於DIV1的width值得話，div2和div3依舊是上下排布而非並列排布
代碼示例如下：
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head></head>
<body>
<div id="1" style="width:600px;height:300px;border:1px solid #000;">
<div id="2" style="float:left;width:500px;height:300px;border:1px solid #000;">div2</div>
<div id="3" style="float:right;width:94px;height:300px;border:1px solid #000;">div3</div>
</div>
</body>
</html>
兩個DIV並排顯示