Question

盖伊，我有点坚持这个项目。尝试创建Google Calander页面。为函数提供一个对象数组，每个对象具有两个属性，即开始和结束，将以下内容打印到屏幕上。

我差不多完成了....这就是我到目前为止所做的事情

我对定位有所了解。如果我应该使内部div的绝对或相对。因为当我把它们变成相对的时候，如果我做了绝对的话，它们会下降到很多，然后无法正确对齐它们。

<!doctype html>
<html class="no-js" lang="">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Title</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="apple-touch-icon" href="apple-touch-icon.png">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="container">
        <div class="wrapper">
            <div id="canv" class="canvas">
<!--                 <div class="event">
                    <h1>Sample Item</h1>
                    <p>Sample location</p>
                </div> -->
            </div>
            <div class="time">
                <p>9:00 <span class="am">AM</span></p>
                <p class="thirty">9:30</p>
                <p>10:00 <span class="am">AM</span></p>
                <p class="thirty">10:30</p>
                <p>11:00 <span class="am">AM</span></p>
                <p class="thirty">11:30</p>
                <p>12:00 <span class="am">PM</span></p>
                <p class="thirty">12:30</p>
                <p>1:00 <span class="am">PM</span></p>
                <p class="thirty">1:30</p>
                <p>2:00 <span class="am">PM</span></p>
                <p class="thirty">2:30</p>
                <p>3:00 <span class="am">PM</span></p>
                <p class="thirty">3:30</p>
                <p>4:00 <span class="am">PM</span></p>
                <p class="thirty">4:30</p>
                <p>5:00 <span class="am">PM</span></p>
                <p class="thirty">5:30</p>
                <p>6:00 <span class="am">PM</span></p>
                <p class="thirty">6:30</p>
                <p>7:00 <span class="am">PM</span></p>
                <p class="thirty">7:30</p>
                <p>8:00 <span class="am">PM</span></p>
                <p class="thirty">8:30</p>
                <p>9:00 <span class="am">PM</span></p>
            </div>
        </div>
    </div>

    <script>

    var events = [ 
        {start: 30, end: 150}, 
        {start: 540, end: 600}, 
        {start: 560, end: 620}, 
        {start: 610, end: 670} 
    ];

    var canvas = document.getElementById("canv");
    var totalElem = 0;
    var totalTop = 0;


    var total = events.forEach(function(event, index){
        var testArr = events;

        var test = testArr.length - index;
        if(index > 0 && test >=2 ){
            totalElem++
        }


    })


    function layOutDay(event){


        var newArr = event; 

        event.forEach(function(event, index){

            var env = document.createElement("div"),
            h1 = document.createElement("h1"),
            p = document.createElement("p"),
            sampleItem = document.createTextNode("Sample Item"),
            sampleLocation = document.createTextNode("Sample Location");

            p.appendChild(sampleLocation);
            h1.appendChild(sampleItem);

            env.className = "event";
            env.setAttribute('id', index)
            env.appendChild(h1);
            env.appendChild(p);
            canvas.appendChild(env);

//conversion
//totalTop = keeping track of start of each event
            var pixelsStart = (event.start * .86);

            pixelsEnd = ((event.end - event.start) * .86);

            totalTop += pixelsEnd;
            console.log(totalTop, 'test');

            env.style.top = pixelsStart + "px";
            env.style.height = pixelsEnd + "px";

// check start collide with previous event
                var test = newArr.length - index;

                if(index > 0 && test >=2 ){
                var start = event.start,
                    end = event.end,
                    check = newArr[index+1].start;

                    function between(check, start, end) {
                      return check >= start && check <= end;
                    }

                    if (between(check, start, end)) {
                        var newWidth = (96/totalElem)

                        env.style.width = newWidth + "%";
                    }
                }

            }) // end of loop

// correct placement
// 1. If 2 or more events - done
// 2. Grab values then check range
// 3. if within same range then run logic to divide with evently
// 4. else place elements as is

            // var newArr = document.getElementsByClassName("event");

            // if(newArr.length > 1){
            //     var start = obj.start;
            //     var end = obj.end;
            //     var check = checkObj.start

            //     var check = function between(check, start, end) {
            //       return check >= start && check <= end;
            //     }

            //     if (check(600, 560, 620)) {
            //         console.log('true')
            //     }


            // }
        }




layOutDay(events);   

</script>


</body>
</html>

CSS

body {
  font-size: 40px;
}

.wrapper {
  position: relative;
}

.canvas {
  background-color: #ECECEC;
  border-left: 2px solid #ABABAB;
  height: 620px;
  width: 720px;
  float: right;
  margin-right: 300px;
  margin-left: 10px;
  position: relative;
}

p {
  font-size: 12px;
  font-family: Arial, Helvetica, sans-serif;
  margin-bottom: 13px;
  margin-bottom: 13px;
}

.am {
  font-size: 10px;
  color: #ADADAD;
}

.thirty {
  font-size: 10px;
  color: #ADADAD;
}

.wrapper {
  width: 1100px;
}

.time {
  text-align: right;
  position: relative;
}

.event {
  background-color: #ffffff;
  border: 1px solid #D9D9D9;
  border-left: 3px solid #63AF8F;
  width: 96%;
  margin-left: 10px;
  margin-right: 0px;
  position: relative;
  float: right;
  top: 28px;
  height: 52px;
  overflow: hidden;
}

.event h1 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  color: #63AF8F;
  padding: 0;
  padding-top: 5px;
  padding-left: 5px;
  margin: 0px;
}

.event p {
  padding: 0;
  padding-left: 5px;
  margin: 0px;
  color: #ADADAD;
}

/*# sourceMappingURL=../maps/style.css.map */

Answer 1

我相信位置亲属很好，你需要检查你的顶级＆＃39;和＆＃39;身高＆＃39;基于开始和结束位置的计算。此外，调整边距位置以正确对齐。并且可以使用包装div并在那里给出一些填充。

CSS定位/需要想法

1 个答案: