Html 左浮动&；右翼：我想让它更具响应性
我有两个div：左边是宽的，右边是侧边栏。我想让它更具响应性（在较低宽度的屏幕上：左侧面板应该变薄，但侧边栏的宽度应该相同，但是它不应该位于宽面板下）。如何修复此代码 HTML代码：Html 左浮动&；右翼：我想让它更具响应性,html,css,layout,Html,Css,Layout,我有两个div：左边是宽的，右边是侧边栏。我想让它更具响应性（在较低宽度的屏幕上：左侧面板应该变薄，但侧边栏的宽度应该相同，但是它不应该位于宽面板下）。如何修复此代码 HTML代码： <section > <div class='post' id="post-8"> <div class='post-title'><a href="http://localhost/?p=8" title="Permalink to Lif
<section >
<div class='post' id="post-8">
<div class='post-title'><a href="http://localhost/?p=8" title="Permalink to Lifestype post 1 Lifestype post 1" rel="bookmark">Lifestype post 1 Lifestype post 1</a></div>
<div class='post-subtitle'>
<div class='added-by'>BY <SPAN class='blue'>Admin</SPAN></div>
<div class='added-at'><img src="http://localhost/wp-content/themes/XXXX/images/icon-clock.png" style="width:12px; margin-right:5px;" >Tuesday, December 2, 2014</div>
</div>
<div class='post-body'>
<p>lifestype post 1 lifestype post 1 lifestype post 1 lifestype post 1 lifestype post 1 lifestype post 1 lifestype post 1 lifestype post 1 lifestype post 1 lifestype post 1 lifestype post 1 lifestype post 1 lifestype post 1 lifestype post 1 lifestype post 1 lifestype post 1 lifestype post 1 lifestype post 1 lifestype post 1 lifestype post 1 lifestype post 1 lifestype post 1</p>
<div class="addtoany_share_save_container addtoany_content_bottom"><div class="a2a_kit addtoany_list a2a_target" id="wpa2a_1"><a class="a2a_button_facebook" href="http://www.addtoany.com/add_to/facebook?linkurl=http%3A%2F%2Flocalhost%2F%3Fp%3D8&linkname=Lifestype%20post%201%20Lifestype%20post%201" title="Facebook" rel="nofollow" target="_blank"><img src="http://localhost/wp-content/themes/XXXXX/images/facebook.png" width="" height="" alt="Facebook"/></a><a class="a2a_button_twitter" href="http://www.addtoany.com/add_to/twitter?linkurl=http%3A%2F%2Flocalhost%2F%3Fp%3D8&linkname=Lifestype%20post%201%20Lifestype%20post%201" title="Twitter" rel="nofollow" target="_blank"><img src="http://localhost/wp-content/themes/XXXXX/images/twitter.png" width="" height="" alt="Twitter"/></a><a class="a2a_button_google_plus" href="http://www.addtoany.com/add_to/google_plus?linkurl=http%3A%2F%2Flocalhost%2F%3Fp%3D8&linkname=Lifestype%20post%201%20Lifestype%20post%201" title="Google+" rel="nofollow" target="_blank"><img src="http://localhost/wp-content/themes/XXXXX/images/google_plus.png" width="" height="" alt="Google+"/></a><a class="a2a_button_linkedin" href="http://www.addtoany.com/add_to/linkedin?linkurl=http%3A%2F%2Flocalhost%2F%3Fp%3D8&linkname=Lifestype%20post%201%20Lifestype%20post%201" title="LinkedIn" rel="nofollow" target="_blank"><img src="http://localhost/wp-content/themes/XXXXXX/images/linkedin.png" width="" height="" alt="LinkedIn"/></a><a class="a2a_dd addtoany_share_save" href="https://www.addtoany.com/share_save"></a>
<script type="text/javascript"><!--
wpa2a.script_load();
//--></script>
</div></div>
</div>
</div>
<div class='post' id="post-4">
<div class='post-title'><a href="http://localhost/?p=4" title="Permalink to Post 2 by pawel Post 2 by pawel Post 2 by pawel Post 2 by pawel" rel="bookmark">Post 2 by pawel Post 2 by pawel Post 2 by pawel Post 2 by pawel</a></div>
<div class='post-subtitle'>
<div class='added-by'>BY <SPAN class='blue'>Admin</SPAN></div>
<div class='added-at'><img src="http://localhost/wp-content/themes/XXXXX/images/icon-clock.png" style="width:12px; margin-right:5px;" >Tuesday, December 2, 2014</div>
</div>
<div class='post-body'>
<p>Post 2 by pawel</p>
<p>Post 2 by pawel</p>
<p>Post 2 by pawel</p>
<div class="addtoany_share_save_container addtoany_content_bottom"><div class="a2a_kit addtoany_list a2a_target" id="wpa2a_3"><a class="a2a_button_facebook" href="http://www.addtoany.com/add_to/facebook?linkurl=http%3A%2F%2Flocalhost%2F%3Fp%3D4&linkname=Post%202%20by%20pawel%20%20Post%202%20by%20pawel%20%20Post%202%20by%20pawel%20%20Post%202%20by%20pawel" title="Facebook" rel="nofollow" target="_blank"><img src="http://localhost/wp-content/themes/XXXXX/images/facebook.png" width="" height="" alt="Facebook"/></a><a class="a2a_button_twitter" href="http://www.addtoany.com/add_to/twitter?linkurl=http%3A%2F%2Flocalhost%2F%3Fp%3D4&linkname=Post%202%20by%20pawel%20%20Post%202%20by%20pawel%20%20Post%202%20by%20pawel%20%20Post%202%20by%20pawel" title="Twitter" rel="nofollow" target="_blank"><img src="http://localhost/wp-content/themes/XXXXX/images/twitter.png" width="" height="" alt="Twitter"/></a><a class="a2a_button_google_plus" href="http://www.addtoany.com/add_to/google_plus?linkurl=http%3A%2F%2Flocalhost%2F%3Fp%3D4&linkname=Post%202%20by%20pawel%20%20Post%202%20by%20pawel%20%20Post%202%20by%20pawel%20%20Post%202%20by%20pawel" title="Google+" rel="nofollow" target="_blank"><img src="http://localhost/wp-content/themes/XXXXX/images/google_plus.png" width="" height="" alt="Google+"/></a><a class="a2a_button_linkedin" href="http://www.addtoany.com/add_to/linkedin?linkurl=http%3A%2F%2Flocalhost%2F%3Fp%3D4&linkname=Post%202%20by%20pawel%20%20Post%202%20by%20pawel%20%20Post%202%20by%20pawel%20%20Post%202%20by%20pawel" title="LinkedIn" rel="nofollow" target="_blank"><img src="http://localhost/wp-content/themes/XXXXXX/images/linkedin.png" width="" height="" alt="LinkedIn"/></a><a class="a2a_dd addtoany_share_save" href="https://www.addtoany.com/share_save"></a></div></div>
</div>
</div>
<div id="nav-below" class="navigation">
<div class="nav-previous"></div>
<div class="nav-next"></div>
</div>
</section>
<aside>
<div class="subsection-title">Search</div>
<form id="searchform" method="get" action="http://localhost">
<div class="input-group" style='width: 100%;'>
<input id="s" name="s" class="form-control" type="text" placeholder="Search for ...">
<span class="input-group-addon"><img src="http://localhost/wp-content/themes/XXXXX/images/icon-search.png" class="image-icon"></span>
</div>
</form>
<div class="ruler">
<hr class="ribbon"></hr>
</div>
<div id="tptn_related" class="tptn_posts "><h3>Popular Posts</h3><ul><li><span class="tptn_after_thumb"><a href="http://localhost/?p=8" rel="bookmark" class="tptn_link"><span class="tptn_title">Lifestype post 1 Lifestype post 1</span></a> <span class="tptn_list_count">(4)</span></span></li></ul></div>.
<!--
<div class="ruler">
<hr class="ribbon"></hr>
</div>
-->
<div class="subsection-title">Subscribe</div>
<form id="searchform" method="get" action="http://localhost">
<div class="input-group">
<input name="s" class="form-control" type="text" placeholder="Enter your email ..." disabled >
<span class="input-group-addon"><img src="http://localhost/wp-content/themes/XXXXXX/images/icon-rss.png" class="image-icon"></span>
</div>
</form>
<div class="ruler">
<hr class="ribbon"></hr>
</div>
<div style="position: relative;">
<div>
<img src="http://localhost/wp-content/themes/XXXXXX/images/social-image.png" width="100%" />
</div>
<div style="z-index: 1; position: absolute; padding: 10px; top: 10px; left: 10px;">
<p class="image-title white">XXXXXX</p>
<p class="image-text white">
http://www.XXXXX.com is new website that entirely helps you get a tax refund. The averige employyee is due €880 a year in over-paid tax.
</p>
<p class="image-text white">
See what you are due!
</p>
</div>
<div style="z-index: 10; position: absolute; padding: 10px; top: 180px; left: 10px;">
<div style="min-height:33px;" class="really_simple_share really_simple_share_button robots-nocontent snap_nopreview"><div class="really_simple_share_facebook_like" style="width:100px;"><div class="fb-like" data-href="https://www.XXXXX.com" data-layout="button_count" data-width="100" ></div></div><div class="really_simple_share_twitter" style="width:100px;"><a href="https://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-text="XXXXXX" data-url="https://www.XXXXXX.com" data-via="" ></a></div></div>
<div class="really_simple_share_clearfix"></div> </div>
</div>
</aside>
700px浮动：左属性。其左右边距的宽度决定其在页面上的位置
3）
不再有浮动：右属性。相反，它有一个位置：绝对top的code>为0；右：0和边距将其从该位置偏移
4） 我已将动态宽度填充（padding right:2%；
）替换为固定宽度填充6px
）。事实上，
和
中的所有边距
和所有填充物
现在都是固定宽度的6px
旁白
需要始终是250px宽？假设，是的：）我知道它在小屏幕上不能完美工作，但是。。假设现在是，让我把它放在整页上。它似乎起作用了。我只是不需要abolutes，它们的行为很奇怪：）。在这种情况下，{position:absolute；top:0；right:0；}
只需将
固定在页面的右上角。
section {
padding-right: 2%;
width: 70%;
max-width: 700px;
float: left;
box-sizing: border-box;
display: block;
background-color: red; }
aside {
max-width: 250px;
padding-right: 2%;
width: 36%;
display: block;
float: right;
background-color: yellow;
box-sizing: border-box; }
body {
margin:0; padding:0;}
section {
display: block;
margin:6px 262px 0 6px;
padding: 6px;
max-width: 700px;
box-sizing: border-box;
background-color: red; }
aside {
display: block;
position: absolute;
top: 0;
right: 0;
width: 250px;
margin: 6px 6px 0 0;
padding: 6px;
background-color: yellow;
box-sizing: border-box;}