Div推下其他div，CSS
我想在现有布局（内容）中添加简单的侧边栏。
到目前为止，我喜欢这个。
HTML
<div class="container">
<div class="side-menui">
</div>
....
</div>
完整的HTML
<div class="container">
<div class="side-menui">
</div>
<div class="banner-navigation-containet clearfix">
<div class="navigation-container pull-left">
<nav class="navbar" role="navigation">
<div class="container-fluid clearfix">
<div class="navbar-header pull-left">
<a class="navbar-brand" href="http://www.lo.eu/lv">
<img alt="logo" class="img-responsive" src="./Ind_files/logo.png" title="logo">
</a>
</div>
<div class="selections">
<div class="pull-left">
<a aria-expanded="true" data-toggle="dropdown" href="http://www.lo.eu/lv?country_id=1#">LATVIJA</a>
<ul class="dropdown-menu">
<a href="http://www..eu/lv?country_id=2">IGAUNIJA</a>
</ul>
</div>
<div class="pull-right">
<a aria-expanded="true" data-toggle="dropdown" href="http://www.lo.eu/lv?country_id=1#" id="dropdownMenu2">LV</a>
<ul class="dropdown-menu">
<li><a href="http://www.lo.eu/ru">RU</a></li>
</ul>
</div>
</div><!-- End language-container -->
</div><!-- /.container-fluid -->
</nav><!-- End navbar-->
</div><!--End navigation-container-->
<div class="banner-2 pull-left">
<img alt="Selection 011" class="img-responsive" height="90" id="banner" src="./Ind_files/Selection_011.jpg" width="500">
</div>
<div class="banner-3 pull-left" ;="">
<img alt="Selection 011" class="img-responsive" height="90" id="banner2" src="./Ind_files/Selection_011(1).jpg" width="500">
</div>
</div><!-- End banner-navigation-containet -->
<!--<div id="bag-icon" class="flip2"> <img alt="Bag icon" src="/assets/bag-icon.png" /></div>
<div id="nav-toggle-lines" class="flip"></div> -->
<div class="row block-list">
<div class="col-lg-4 col-md-3 col-sm-2 col-xs-1 block clearfix" id="advertisement-col" style="display:none; border:none;">
</div><!-- End block-->
<div class="col-lg-4 col-md-3 col-sm-2 col-xs-1 block clearfix">
<div class="block-main-info clearfix">
<div class="pull-left block-main-title">dasdad</div>
<div class="pull-left block-main-location">Buļļi</div>
<div class="pull-left block-main-id">ID </div>
</div><!-- End block-main-info -->
<div class="pull-left block-image">
<a class="" href="http://www.lo.eu/lv?country_id=1#" onclick="loginModalShow();" require_login="true"><img alt="dasdad" src="./Ind_files/block-2-image(1).jpg" title="dasdad"></a>
</div><!-- End block-image -->
<div class="pull-left block-info">
<table>
<tbody><tr class="block-age">
<td class="block-info-image"></td>
<td class="block-info-number">22</td>
<td class="block-info-text">teksts</td>
</tr>
<tr class="block-length">
<td class="block-info-image"></td>
<td class="block-info-number">148</td>
<td class="block-info-text">teksts</td>
</tr>
<tr class="block-weight">
<td class="block-info-image"></td>
<td class="block-info-number">43</td>
<td class="block-info-text">teksts</td>
</tr>
<tr class="block-bust">
<td class="block-info-image"></td>
<td class="block-info-number">1</td>
<td class="block-info-text">teksts</td>
</tr>
</tbody></table>
<div class="block-bottom-info">
<div class="block-info-tel-number"><span>+371</span> 26262626</div>
<div class="clearfix">
<div class="pull-left">stunda:</div>
<div class="pull-right"><b>60</b>EUR</div>
</div>
</div><!-- End block-info -->
</div><!-- End block-info -->
</div><!-- End block-->
</div><!-- End row-->
<div class="panel">
<form accept-charset="UTF-8" action="http://www.lo.eu/lv/girls" class="girl_search" data-remote="true" id="girl_search" method="get"><div style="display:none"><input name="utf8" type="hidden" value="✓"></div>
<div class="sort-links">
<div class="input-group">
<input class="form-control" id="q_name_or_phone_number_or_identifier_cont" name="q[name_or_phone_number_or_identifier_cont]" placeholder="Search..." type="text">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><img alt="Search icon" src="./Ind_files/search-icon.png" width="15"></button>
</div>
</div>
</div>
<div id="sorter">
<div id="left">
<select id="q_region_id_eq" name="q[region_id_eq]"><option value="">RAJONS</option>
</div>
<div id="center">
<a class="sort_link " data-method="get" data-remote="true" href="http://www.lo.eu/lv?country_id=1&q%5Bs%5D=height+asc">AUGUMS</a>
</div>
<div id="right">
<a class="sort_link " data-method="get" data-remote="true" href="http://www.lo.eu/lv?country_id=1&q%5Bs%5D=bust_size+asc">KRŪTIS</a>
</div>
</div>
<div id="sorter">
<div id="left">
<a class="sort_link " data-method="get" data-remote="true" href="http://www.lo.eu/lv?country_id=1&q%5Bs%5D=age+asc">VECUMS</a>
</div>
<div id="center">
<a class="sort_link " data-method="get" data-remote="true" href="http://www.lo.eu/lv?country_id=1&q%5Bs%5D=per_hour+asc">CENA</a>
</div>
<div id="right">
<a class="sort_link " data-method="get" data-remote="true" href="http://www.lo.eu/lv?country_id=1&q%5Bs%5D=votes_for.size+asc">REITINGS</a>
</div>
</div>
<div class="clickable">
<a href="http://www.lo.eu/lv/girls">MEITENES</a>
<span>MEITENES</span>
</div>
<div class="clickable" id="blacklist-menu">
<a href="http://www.lo.eu/lv?country_id=1#">MELNAIS SARAKSTS</a>
<span>MELNAIS SARAKSTS
<div class="pull-right">
<div id="icon-side"> >
<!--- <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> -->
</div>
<div id="icon-down" style="display:none;">
<!--<span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span> -->
</div>
</div>
</span>
</div>
<!-- Noslēptās izvēles -->
<div class="clickable" id="hiden" style="display:none;">
<a class="" href="http://www.lo.eu/lv?country_id=1#" onclick="loginModalShow();" require_login="true">Meitenes </a>
<span>MEITENES</span>
</div>
<div class="clickable" id="hiden2" style="display:none;">
<a class="" href="http://www.lo.eu/lv?country_id=1#" onclick="loginModalShow();" require_login="true">Klienti </a>
<span>KLIENTI</span>
</div>
<!-- Noslēptās izvēles BEIGAS-->
<div class="clickable" id="shown">
<a href="http://www.lo.eu/lv/rules">NOTEIKUMI </a>
<span>NOTEIKUMI</span>
</div>
<div class="clickable" id="shown2">
<a href="http://www.lo.eu/lv/girls/new">IESNIEGT SLUDINĀJUMU </a>
<span>IESNIEGT SLUDINĀJUMU</span>
</div>
</form>
</div>
<div class="panel2">
<div class="dr">
<div class="clickable2">
<a class="" href="http://www.lo.eu/lv?country_id=1#" onclick="loginModalShow();" require_login="true">IENĀKT</a>
<span>Ieiet</span>
</div>
<div class="clickable2">
<a href="http://www.lo.eu/lv">ANKETA</a>
<span>Anketa</span>
</div>
<div class="clickable2">
<a data-target="#usersignup" data-toggle="modal" href="http://www.lo.eu/lv?country_id=1#" id="asaa">REĢISTRĒTIES</a>
<span>Reģistrēties</span>
</div>
<div class="clickable2">
<a href="http://www.lo.eu/lv/help">PALĪDZĪBA</a>
<span>Palīdzība</span>
</div>
</div><!-- End block-->
</div>
</div><!-- End container -->
CSS
.container {
width: 1170px;
padding: 0;
}
div.side-menui {
position: relative;
left:-20px;
z-index: 5;
width:35px;
height:350px;
border:1px solid gray;
}
问题：side-menui将所有内容精确地推下来。
我需要什么：
我用谷歌搜索类似的问题尝试了其他职位，如绝对，固定......但我的结果比我已经有了更糟糕。
我错过了一些非常简单的事情？
1 个答案:
答案 0 :(得分：2)
你需要从流中取出元素，这样才不会影响其他任何东西。
你可以通过设置
来做到这一点 float: left;
或
position: absolute; /* or fixed */
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？