創建並排排列的div

-1

我想創建並排排列的div，每個填充高度和寬度的25％。我的腳本創建了25％的高度和寬度的div，但它們保持一個在另一個之下。我的腳本是：創建並排排列的div

function createDiv() { 
 
    var div_created = document.createElement("div"); 
 
    div_created.setAttribute("class", "div1"); 
 

 
    document.body.appendChild(div_created); 
 
    }

.div1 { 
 
    width: 50%; 
 
    height: 50%; 
 
    background-color: #000000; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" type="text/css" href="estilo_segundo.css"> 
 
<body> 
 
<button onclick="createDiv()">Click</button> 
 
</body>

來源

2016-11-17 Isaac Meneses

[如何將div並排排列]可能的副本（http://stackoverflow.com/questions/2637696/how-to-place-div-side-by-side） – Tibrogargan

'display：flex;' –

鏈接：-http：//stackoverflow.com/questions/4938716/align-div-elements-side-by-side –

.div1 { 
    width: 50%; 
    height: 50%; 
    background-color: #000000; 
    float:left; 
}

來源

2016-11-17 03:47:01

添加html,body風格 &內div1添加float:left;

html,body 
{ 
    width: 100%; 
    height: 100%; 
} 

.div1 { 
    width: 50%; 
    height: 50%; 
    background-color: #000000; 
    float:left; 
}

現場演示Here

摘錄例

function createDiv() { 
 
    var div_created = document.createElement("div"); 
 
    div_created.setAttribute("class", "div1"); 
 
    document.body.append(div_created); 
 
}

html, 
 
body { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
.div1 { 
 
    width: 50%; 
 
    height: 50%; 
 
    background-color: #000000; 
 
    float: left; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<body> 
 
    <button onclick="createDiv()">Click</button> 
 
</body>

來源

2016-11-17 03:57:31

你可以在一個包裝DIV使用display: table;，簡化您的JS：

<html><head> 
<script type="text/javascript"> 
function createDiv() { 
    document.getElementById('div1').innerHTML += '<div></div>'; 
} 
</script> 
<style type="text/css"> 
#div1 { 
    width: 100%; 
    height: 100%; 
    display: table; 
    background-color: #000000; 
} 
#div1 div { 
    display: table-cell; 
    border: 1px solid green; /* green for display */ 
} 
</style> 
</head><body> 
<button onclick="createDiv()">Click</button> 
<div id="div1" name="div1"></div> 
</body></html>

這會向div1包裝div添加一個內部「單元格」。由於包裝佔用了顯示高度/寬度，因此每個內部div都具有「自動」寬度（如表<td>所示）。

來源

2016-11-17 04:25:06 txtechhelp

創建並排排列的div

回答

相關問題