jquery - 具有水平内容 CSS 的绝对固定 div

Question

我在我的网站中使用 Bootstrap。我需要在正文内容的页面右下角有一个 div，其中所有 4 个帖子都是水平的。类似的东西

我在点击按钮后用 JQuery 将这 4 篇文章一一添加到这里

$('#form_container').append('<div class="rows"> <input type="hidden" value="'+response.data.post_id+'"> <a href="#" class="remove-title">X</a> <img src="'+response.data.post_thumb+'"/> <br> '+response.data.post_title+' </input></div>');

这是 HTML Form这些输入是用 JQuery 添加的。

<div id="form-div">
 <form id="form_container" action="<?php echo home_url( '/' ); ?>final" method="POST">
  <button type="button" class="div-close"><span aria-hidden="true" style="font-size:20px">&times;</span></button>

   <!–– Here is Added 4 input's with JQuery ––>

  <input type="submit" name="submit" value="Compare">
 </form>
</div>

如何创建<div id="form-div">在右下角 horizontal帖子看起来不错？

我需要与图片中相同的副本。

这是我正在尝试的 JSFIddle JSFiddle Example

Answer 1

只需将您的 .rows 向左浮动...

.rows{
  float: left; /* ADD THIS */
  margin-right: 5px; /* AND LIKELY THIS ETC */
  width:75px;
  height:100px;
  text-align:center;
  font-weight:bold;
}