我有2个div：左边是宽边，右边是侧边栏。我想让它更具响应性（在较宽的屏幕上：左侧面板应该变薄，但侧边栏应该是相同的宽度，但它不应该在宽面板下）。如何修复此代码？
HTML CODE：
<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>
CSS代码：
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; }
答案 0 :(得分：1)
尝试：
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;}
我对你的风格做了很多改变。
即：
1）<section>仍有最大宽度，但不再具有指定的宽度。相反，在任何小于700px的页面宽度上，其宽度始终会自动重新计算为页面宽度的100％减去左右边距。
2）<section>不再具有float:left;属性。其左右边距的宽度决定了它在页面上的位置。
3）<aside>不再具有float:right;属性。相反，它有position:absolute; top:0; right:0;和边距以抵消该位置。
4）我已经用padding-right: 2%;的固定宽度填充替换了动态宽度填充（6px）。事实上，margins和paddings中的所有<section>和所有<aside>现在都是6px的固定宽度。