CSS将div保持在彼此之上

时间：2016-07-22 04:57:34

标签： html css html5 css3 web

我非常擅长CSS而且不知道我在做什么。我做了jsfiddle。

这是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

1 个答案:

答案 0 :(得分：1)

我自己已经解决了，我能够将div叠加在一起。

HTML 

<div class="employees">
        <div class="employee">
            <header>[Name]</header>
            <div class="nodes">
                <div class="node">
                    <div class="timestamps">
                        <div class="width-full text-white text-outline">2016-07-22 08:00:00</div>
                    </div>
                    <textarea class="node-text text-white text-outline"></textarea>
                </div>
                <div class="node" style="margin-left: 220px;">
                </div>
                <div class="node" style="margin-left: 430px;">
                </div>
                <div class="node" style="margin-left: 430px;">
                </div>
                <div class="node" style="margin-left: 220px;">
                </div>
                <div class="node">
                </div>
                <div class="node">
                </div>
                <div class="node" style="margin-left: 220px;">
                </div>
            </div>
        </div>
        <div class="employee">
            <header>[Name]</header>
            <div class="nodes">
                <div class="node">
                </div>
                <div class="node">
                </div>
                <div class="node">
                </div>
            </div>
        </div>
        <div class="employee">
            <header>[Name]</header>
            <div class="nodes">
                <div class="node">
                </div>
                <div class="node">
                </div>
            </div>
        </div>
        <div class="employee">
            <header>[Name]</header>
            <div class="nodes">
                <div class="node">
                </div>
                <div class="node">
                </div>
            </div>
        </div>
    </div>

CSS 

body
{
    margin: 0;
    padding: 0;
}

.employees
{
    border: none;
    width: 100%;
    height: 100vh;
    overflow-x: scroll;
    overflow-y: scroll;
    white-space: nowrap;
}

.employee 
{
    display: inline-block;
    white-space: normal;
    background-color: #ff8888;
    max-width: 600px;
    width: 600px;
    height: 100%;
    margin: 10px 10px;
}

.employee header
{
    text-align: center;
    width: 100%;
    color: white;
    text-shadow: 0.5px 0.5px 1px black;
    padding: 10px 0px;
}

.overflow-scroll-x
{
    overflow-x: scroll;
}

.overflow-scroll-y
{
    overflow-y: scroll;
}

.overflow-scroll-both
{
    overflow: scroll;
}

.overflow-hidden-x
{
    overflow-x: hidden;
}

.overflow-hidden-y
{
    overflow-y: hidden;
}

.overflow-hidden-both
{
    overflow: hidden;
}

.width-full
{
    width: 100%;
}

.height-full
{
    height: 100vh;
}

.border-none
{
    border: 0;
}

.nodes
{
    width: 100%;
    height: calc(100% - 40px);
    overflow-y: scroll;
    overflow-x: scroll;
    border-top: 1px solid black;
}

.node
{
    float: top;
    width: 200px;
    height: 100px;
    background-color: #568C54;
    margin: 10px;
    margin-left: 10px;
    position: relative;
}

.node-text
{
    width: calc(100% - 10px);
    height: calc(100% - 30px);
    border: 0;
    background-color: transparent;
    resize: none;
    padding: 0;
    margin: 30px 5px 0px 5px;
}

.timestamps
{
    background-color: #fff3b2;
    position: absolute;
    top: 0;
    left: 0;
    width: 140px;
}

.text-outline
{
    text-shadow: 0.5px 0.5px 1px black;
}

.text-outline-inverse
{
    text-shadow: 0.5px 0.5px 1px white;
}

.text-white
{
    color: white;
}

jsfiddle

相关问题
最新问题