如何让子级div仅仅在自己所在的父级div中漂浮

Question

我的代码如下：

<div class="sin_b">
       <!-- 单个的查询 -->
       <div class="sin_c">
          <div class="con_top">
              <div class="sin_fir">
                  <select class="fir_sel">
                      <optgroup label="user1">
                          <option value="user1.id">id</option>
                          <option value="user1.name">name</option>
                      </optgroup>
                      <optgroup label="department1">
                          <option value="department1.id">id</option>
                          <option value="department1.code">code</option>
                      </optgroup>
                   </select>
              </div>
              <div class="sin_sec">
                   <select class="op_sec">
                       <option value="==" >等于</option>
                       <option value="<" >小于</option>
                       <option value=">" >大于</option> </select>
                                                </div>
                                                <div class="sin_thi">
                                                    <input type="text" class="val_inp"/>
                                                </div>
                                                <div class="sin_opt"><a class="op_hr" href="javascript:void(0)">删除</a> </div>
                                            </div>
                                            <div class="error_title" style="display: block">错误提示</div>
                                        </div>
                                        <div class="sin_c">
                                            <div class="con_top">
                                                <div class="sin_fir">
                                                    <select class="fir_sel">
                                                        <optgroup label="user1">
                                                            <option value="user1.id">id</option>
                                                            <option value="user1.name">name</option>
                                                        </optgroup>
                                                        <optgroup label="department1">
                                                            <option value="department1.id">id</option>
                                                            <option value="department1.code">code</option>
                                                        </optgroup>
                                                    </select>
                                                </div>
                                                <div class="sin_sec">
                                                    <select class="op_sec">
                                                        <option value="==" >等于</option>
                                                        <option value="<" >小于</option>
                                                        <option value=">" >大于</option>
                                                    </select>
                                                </div>
                                                <div class="sin_thi">
                                                    <input type="text" class="val_min"/><span class="val_con_tar">--</span><input class="val_max" type="text"/>
                                                </div>
                                                <div class="sin_opt"><a class="op_hr" href="javascript:void(0)">删除</a> </div>
                                            </div>
                                            <div class="error_title" style="display: none">错误提示</div>
                                        </div>
                                    </div>

我想把这些元素标签排列成如下的排版格式：

请问大神们，仅仅使用上述代码中的class属性值来修改样式，这个css样式应该怎么写？

Answer 1

父级div的css position:relative ,子级div用position:absolute;

Answer 2

.sin_c div {
    float: left;
    position: relative;
}
.sin_c {
    overflow: hidden;
    clear: left;
}