如何使用id / class将元素放在一边？

Question

我想将搜索元素放在“媒体标题1”元素或“媒体标题2”元素的旁边。

例如：

考虑一下，我有一个带有“media-item-1”类的元素，我想通过使用它的类“media-item-1”将搜索div放在那个元素旁边。它将来应该是动态的我想通过改变目标元素id / class来改变位置。

<div class="content">
    <div class="media-item-1 col-md-8 col-sm-8 col-xs-8">
        <div class="media">
            <div class="media-body">
                <h4 class="media-heading">Media heading 1</h4>
                This is some sample text. This is some sample text. 
                This is some sample text. This is some sample text.
            </div>
        </div>
    </div>    
</div>

<div class="sidebar-second">
    <div class="form-item-search col-md-4 col-sm-4 col-xs-4">
      <label for="search">Search</label>
      <input type="text" id="search"  size="15" maxlength="60">
    </div>
</div>

使用bootstrap / jquery有没有办法做到这一点？

以下是jsbin

中的代码

Answer 1

这是一个例子。根据指定的id设置元素的div顶部。

  <div class="sidebar-second" style="position:absolute;">
    <div class="form-item-search col-md-4 col-sm-4 col-xs-4" style="width: 250px;">
      <label for="search" style="float:left;" >Search</label>
      <input type="text" id="search"  size="15" maxlength="60" style="float:left;">
    </div>
  </div>

 </div>
 <div><input type="button" value="SetMe" id="setme" class="ui-button ui-widget ui-state-default ui-corner-all" role="button"></div> 
 </div>

<script>
$( "#setme" ).click(function(){
   var setbutton = $( ".media-item-1" );
   var position = setbutton.position();
   $(".sidebar-second").css({top: position.top, left: 200, position:'absolute'});
});
</script>

Answer 2

试试这个：JSFIDDLE

$("[class^='media-item-']:not(:last)").after($(".form-item-search").clone());

Answer 3

将两个div放在一起的简单示例

#class1 {
  width:200px;
  height:200px;
  background:#f0f0f0;
  }

#class2 {
  position:absolute;
  top: 10px;  
  left:220px;
  width:200px;
  height:200px;
  background:red;
  }

<div id="class1"> Div1 </div>
<div id="class2"> Div1 </div>

http://jsfiddle.net/4n6mq14d/