时间戳

首页 > 解决方案 > 添加元素而不影响其他元素

jquery - 添加元素而不影响其他元素

问题描述

我有一个简单的应用程序，当您单击 jQuery 日期选择器时，它会将新日期作为 div 添加到一旁，不幸的是，它每次都会在主元素中向下移动元素。我将如何阻止这种行为？

https://codepen.io/fuzzalicious/pen/qBOLKgr

<aside>
        <p>Date: <input type="text" id="datepicker"></p>
        <div id="saved_dates_list"></div>
    </aside>

    <main>
        <h1 id="date">Select a date</h1>
        <h1 id="days"></h1>
    </main>

function addNewDate(dateText) {
    let newDate = $('<div class="saved_date">' + dateText + '</div>')
    $("#saved_dates_list").append(newDate);
}

我可能错过了一个简单的浮动解决方案，它允许日期 div 保留为块而不是内联。它可能可以通过使用 flex 行布局来完成，但我希望主要元素以页面为中心，而不是让宽度占据一旁。

标签： jquerycss

解决方案

我编辑了您的样式和 html，看看我是否正确理解了这个想法试试这个： https ://codepen.io/opmasan/pen/VwvqBMB

<aside>
    <p>Date: <input type="text" id="datepicker"></p>
    <div id="saved_dates_list"></div>
</aside>

<main>
  <div  class="content">
    <h1 id="date">Select a date</h1>
    <h1 id="days"></h1>
  </div>
</main>


aside {
  position: absolute;
  z-index: 2;
}

推荐阅读