问CSS定位/需要想法
EN

Stack Overflow用户

提问于 2017-02-05 03:31:25

回答 1查看 43关注 0票数 0

这家伙说我对这个项目有点执着。正在尝试创建一个Google日历页面。给一个函数一个对象数组，每个对象都有两个属性，start和end，在屏幕上打印下面的内容。

我就快完成了..。这是我到目前为止所拥有的

我对定位很感兴趣。如果我应该使内部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 */

javascript

css

回答 1

Stack Overflow用户

发布于 2017-02-05 04:55:54

我相信相对位置是好的，你需要检查你基于开始和结束位置的‘顶部’和‘高度’计算。此外，调整页边距位置以正确对齐。并且可以使用wrapper div并在那里提供一些填充。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/42044690

复制

相似问题

问CSS定位/需要想法
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS定位/需要想法EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS定位/需要想法
EN