-2
我在CSS上很糟糕，不知道我在做什么。我做了一个jsfiddle。将div保留在另一个之上
下面是HTML文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test</title>
<meta name="description" content="Prilyx Test">
<meta name="author" content="Prilyx">
<!-- Mobile Specific Metas -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Font -->
<!-- CSS -->
<!-- JS -->
<script src="js/test.js"></script>
</head>
<body>
<script>
var employees = [ { id:1, user: '[Name Here]'} ];
</script>
<div id="main" class="main bg-grey overflow-scroll-both">
</div>
</body>
</html>
这里是JavaScript文件：
/*======================================================
Global variables
======================================================*/
var m_bInitialized = false;
var m_bFirstLoad = true;
var node_id = 0;
/**
Key Presses
*/
var keyShiftPressed = false;
var keyCtrlPressed = false;
/**
Elements
*/
var elementMain;
var employees = [{
id: 1,
user: '[Name Here]'
}];
/*======================================================
Initialization functions
======================================================*/
window.onload = function() {
console.log("Test");
elementMain = document.getElementById("main");
init();
}
/**
The main initialization function that gets called once the body
of the webpage has loaded.
**/
var init = function() {
var node = {
id: "0",
body: "Test",
creator_id: "1",
created_at: "2016-07-21 00:00:00"
};
addNodes(node);
}
/**
Things to load after the page has initialized
**/
var load = function() {
}
/*======================================================
Clean up functions
======================================================*/
window.onbeforeunload = function() {
}
/*======================================================
Helper functions specific to this page
======================================================*/
Number.prototype.pad = function(size) {
var s = String(this);
while (s.length < (size || 2)) {
s = "0" + s;
}
return s;
}
function insertAfter(newNode, referenceNode) {
referenceNode.parentNode.insertBefore(newNode,referenceNode.nextSibling);
}
var addNodes = function(node) {
console.log("adding node");
var ele = document.createElement("div");
ele.style.display = "inline-block";
ele.style.minWith = "450px";
ele.style.whiteSpace = "normal";
ele.style.borderRadius = "4px";
ele.style.margin = "5px";
ele.style.verticalAlign = "top";
ele.style.backgroundColor = "#d05656";
var header = document.createElement("header");
header.innerHTML = "Default";
header.style.color = "white";
header.style.textShadow = "0 1px 0 rgba(0,0,0,0.4)";
header.style.fontSize = "1.6em";
header.style.textAlign = "center";
header.style.marginTop = "15px";
for (var i = 0; i < employees.length; i++) {
if (employees[i]['id'] == node['creator_id']) {
ele.id = 'e_' + employees[i]['id'];
header.innerHTML = employees[i]['user'];
break;
}
}
ele.appendChild(header);
var times = document.createElement("div");
times.style.width = "auto";
times.style.height = "auto";
for (var i = 0; i < 24; i++) {
var timenode = document.createElement("div");
timenode.style.width = "450px";
timenode.style.height = "auto";
timenode.style.marginBottom = "20px";
timenode.style.marginLeft = "10px";
timenode.style.marginRight = "10px";
timenode.style.marginBottom = "10px";
timenode.style.paddingBottom = "2px";
if (i < 23) {
timenode.style.marginTop = "5px";
}
times.appendChild(timenode);
var timestamp = document.createElement("i");
timestamp.style.marginLeft = "10px";
timestamp.style.marginTop = "10px";
timestamp.style.backgroundColor = "#D8B279";
timestamp.style.color = "white";
timestamp.style.textShadow = "0 1px 0 rgba(0,0,0,0.4)";
timestamp.style.fontSize = "1em";
var time = "2016-07-21 " + (i).pad() + ":00:00";
timestamp.innerHTML = time;
timenode.appendChild(timestamp);
var nodeList = document.createElement("div");
nodeList.style.width = "auto";
nodeList.style.minWidth = "150px";
nodeList.style.minHeight = "100px";
nodeList.style.height = "auto";
timenode.appendChild(nodeList);
var end = Math.floor(Math.random() * 3) + 1;
for (var j = 0; j < end; j++) {
var node = document.createElement("textarea");
node.id = node_id++;
node.style.float = "none";
node.style.clear = "both";
node.style.width = "150px";
node.style.height = "100px";
node.style.display = "inline-block";
node.style.verticalAlign = "top";
node.style.marginTop = "5px";
node.style.marginBottom = "5px";
node.style.marginLeft = "10px";
node.style.marginRight = "10px";
node.style.border = "none";
node.style.resize = "none";
node.style.backgroundColor = "#39853e";
node.style.textAlign = "center";
node.style.color = "white";
node.style.textShadow = "0 1px 0 rgba(0,0,0,0.4)";
node.style.fontSize = "1.4em";
node.addEventListener('keydown', function(e) {
if (e.keyCode == 13) {
} else if (e.keyCode == 16) {
keyShiftPressed = true;
return;
} else if (e.keyCode == 17) {
keyCtrlPressed = true;
return;
} else {
return;
}
e.preventDefault();
});
node.addEventListener('keyup', function(e) {
console.log(e.keyCode);
if (e.keyCode == 13) {
if (keyShiftPressed && !keyCtrlPressed) {
addNode(this, true, false);
} else if (!keyShiftPressed && keyCtrlPressed) {
addNode(this, false, true);
} else {
addNode(this, false, false);
}
} else if (e.keyCode == 16) {
keyShiftPressed = false;
return;
} else if (e.keyCode == 17) {
keyCtrlPressed = false;
return;
} else {
return;
}
e.preventDefault();
});
nodeList.appendChild(node);
}
}
ele.appendChild(times);
main.appendChild(ele);
}
var addNode = function(self, subtask, previoustask) {
var node = document.createElement("textarea");
node.id = node_id++;
node.style.float = "none";
node.style.clear = "both";
node.style.width = "150px";
node.style.height = "100px";
node.style.display = "inline-block";
node.style.verticalAlign = "middle";
node.style.marginTop = "5px";
node.style.marginBottom = "5px";
if (!subtask && !previoustask) {
node.style.marginLeft = self.style.marginLeft;
} else if (subtask && !previoustask) {
node.style.marginLeft = parseInt(self.style.marginLeft.slice(0, -2)) + 120 + "px";
} else if (!subtask && previoustask) {
if (parseInt(node.style.marginLeft.slice(0, -2)) < 100) {
node.style.marginLeft = self.style.marginLeft;
} else {
node.style.marginLeft = parseInt(self.style.marginLeft.slice(0, -2)) - 120 + "px";
}
}
node.style.marginRight = "10px";
node.style.border = "none";
node.style.resize = "none";
node.style.backgroundColor = "#39853e";
node.style.textAlign = "center";
node.style.color = "white";
node.style.textShadow = "0 1px 0 rgba(0,0,0,0.4)";
node.style.fontSize = "1.4em";
node.addEventListener('keydown', function(e) {
if (e.keyCode == 13) {
} else if (e.keyCode == 16) {
keyShiftPressed = true;
} else if (e.keyCode == 17) {
keyCtrlPressed = true;
return;
} else {
return;
}
e.preventDefault();
});
node.addEventListener('keyup', function(e) {
console.log(e.keyCode);
if (e.keyCode == 13) {
if (keyShiftPressed && !keyCtrlPressed) {
addNode(this, true, false);
} else if (!keyShiftPressed && keyCtrlPressed) {
addNode(this, false, true);
} else {
addNode(this, false, false);
}
} else if (e.keyCode == 16) {
keyShiftPressed = false;
} else if (e.keyCode == 17) {
keyCtrlPressed = false;
return;
} else {
return;
}
e.preventDefault();
});
insertAfter(node, self);
node.focus();
}
我想要做的是，让那些绿色节点堆叠在彼此的顶部，而不是的权利。当有人按下Enter时，绿色节点直接放置在当前节点的下面。如果shift + enter被按下，一个节点被放置在下方，但是向前推进一个节点宽度的边缘。如果按下ctrl + enter，节点会放在下方，但会拉回来，直到它位于最左端。
像这样： Example design
你实际上是在说什么：我没有关于CSS的线索，你能为我做到这一点？这不会发生在SO上。 –
我不是要求别人为我做，在小提琴中它几乎完成。我所有的节点都放在彼此的右侧，而不是堆叠在彼此的顶部。我尝试过漂浮它们，但是整个事情只是打破了，我试图打包它们，但是打破了，我不擅长CSS，并且要求帮助让它们堆积起来 – Jason
好吧，我谦虚地道了歉。并认真解决这个问题！ –