Question

我有一个简单的应用程序，当您单击jQuery datepicker时，它会将新的日期作为divs添加到一边，但不幸的是，它每次在main元素中都向下移动元素。我将如何停止这种行为？

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行布局来完成此操作，但是我希望main元素位于页面的中心，而不会占用旁边的宽度。

Answer 1

我编辑了您的样式和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;
}

Answer 2

可能在CSS中将float: left;添加到.saved_date

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

2 个答案: