html - 左右浮动div : I want to make it more responsive

Question

我有 2 个 div:左侧为宽，右侧为侧边栏。我想让它更具响应性(在宽度较低的屏幕上:左侧面板应该变薄，但侧边栏的宽度应该相同，但它不应该放在宽面板下)。如何修复此代码？

jsFiddle .

HTML 代码:

<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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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; }

Answer 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;属性(property)。它的左右边距的宽度决定了它在页面上的位置。

3) <aside>不再有 float:right;属性(property)。相反，它有一个 position:absolute;的 top:0; right:0;和边距以抵消该位置。

4) 我已经用 padding-right: 2%; 的固定宽度填充替换了动态宽度填充 ( 6px ) .事实上，所有margins和所有 paddings在两个<section>和 <aside>现在是 6px 的固定宽度.