工作日日历 - 通过 JS 将 3 DIV 动态附加在一起 - 尝试将最终 DIV 刷新到右侧

Question

为我的训练营制作一个简单的工作日日历。那里有 95% - 所有的逻辑都运行良好，但我有一个问题让保存按钮正确地一直浮动到右边并清除 DIV 按钮之间没有错误的 space和块的右边缘。

这里是这个项目的 github 存储库： https://github.com/infiniteoo/homework_week_05_third_party_apis

这是一个活生生的例子： https://infiniteoo.github.io/homework_week_05_third_party_apis/

这里是与此问题有关的相关代码，以便快速查看：

timeDiv.text(finalHour + amPM);
    timeDiv.addClass('time-div');

    // 2nd column: events (big/wide)
    let descriptionDiv = $("<div>");
    let textAreaForDiv = $("<textarea>");
    textAreaForDiv.attr('id', 'textarea' + hour);

    descriptionDiv.append(textAreaForDiv);
    descriptionDiv.addClass("description");
    descriptionDiv.css("width", "80%");
   


    // creates floppy disk icon for save button
    let saveIcon = $('<i>');
    saveIcon.addClass("fa fa-save");

    // 3rd column: save button 
    let saveDiv = $("<div>");
    saveDiv.addClass("saveBtn ");
    saveDiv.attr('id', hour);
 

    // add icon to save button
    saveDiv.append(saveIcon);

    // append all three individual blocks to the bigger div
    timeBlock.append(timeDiv, descriptionDiv, saveDiv);

    timeBlock.addClass("time-block row");

    if (currentHour > hour) {

        // if the hour has passed, make the background grey
        timeBlock.addClass("past");

    } else if (currentHour < hour) {

        // if the hour happens in the future, make the background green
        timeBlock.addClass("future");
        textAreaForDiv.attr("placeholder", "Enter a task to complete this hour...");

    } else {

        // make the background red
        timeBlock.addClass("present");
        textAreaForDiv.attr("placeholder", "Enter a task to complete this hour...");
    }

    // add completed time block to the main container 
    $("#main-contain").append(timeBlock);

现在，如果我想 'cheat' 并在保存按钮上放置一些 padding-left，这会修复它，但是当您以较小的宽度查看网站时网站会中断，并且这些项目需要响应。

我确定我遗漏了一些小东西，老实说，如果你宁愿给我一个提示而不是答案，我会更喜欢它。如果你这样做，我保证我会 return 到线程和 post 有效的答案并赞美你。

谁能给我指出正确的方向？

非常感谢您的帮助！

Answer 1

您在行元素上使用了 flex。默认情况下，这将使子元素在左侧相互碰撞。

您可以通过多种方式将它们 space 排成一排。我想你想要的是 space-between 这将平均分配任何备用 space 并将其放在元素之间，最左边的元素对着左边，最右边的元素对着右边（哪个是您希望保存按钮所在的位置）。所以，添加这个：

.row {
  justify-content: space-between
}

工作日日历 - 通过 JS 将 3 DIV 动态附加在一起 - 尝试将最终 DIV 刷新到右侧

Work Day Calendar - Appending 3 DIVs Together Dynamically via JS - Trying to Flush Final DIV to the Right

html

javascript

css

layout

calendar

工作日日历 - 通过 JS 将 3 DIV 动态附加在一起 ​​- 尝试将最终 DIV 刷新到右侧

Work Day Calendar - Appending 3 DIVs Together Dynamically via JS - Trying to Flush Final DIV to the Right

html

javascript

css

layout

calendar

工作日日历 - 通过 JS 将 3 DIV 动态附加在一起 - 尝试将最终 DIV 刷新到右侧