Html 在css中添加新列并使其响应

我正在制作一个媒体网站。有人能帮忙吗 我与这个css设计，它是越来越多 当我缩小浏览器时，我尝试了一切。请 有人能帮忙吗？更重要的是，我想让它反应灵敏， 请给我一些提示，或者如果有一种使用方法 引导

<style>
    @charset "utf-8";



    .clear{clear:both;}
    br.clear{clear:both; margin-top:-15px;}

        img {
        height:auto;
        }


        /* ----------------------------------------------Wrapper------------------------------------- */

        div.wrapper{display:block; width:100%; margin:0; text-align:left;}
        div.wrapper h1, div.wrapper h2, div.wrapper h3, div.wrapper h4, div.wrapper h5, div.wrapper h6{  font-size:20px; font-weight:bold; line-height:normal;}
        .col1{color:black;font-weight:bold; background-color:#eee;}
        .col2{color:black;font-weight:bold; background-color:#eee;}
        .col3{color:black;font-weight:bold; background-color:#eee; padding:20px 0; border-bottom:1px solid #839B05;}
        .col4{color:black; font-weight:bold;background-color:#eee; border-bottom:1px solid #839B05;}
        .col5{color:black;font-weight:bold; background-color:#ccc;}
        .col6{color:black;font-weight:bold; background-color:#ccc; border-top:1px solid #839B05; border-bottom:1px solid #839B05;}
                .col7, .col7 a{color:red; background-color:#151515;}


                 #containerssss, .gallery, #footersss, #copyright{display:block; position:relative;margin:0 auto;}







                .gallery{padding:20px 0 30px 0;  background-size: contain;}
                .wrapper .gallery h2{display:block; text-align:center; margin:0 0 20px 0; padding:0; color:#2C2C2C; background-color:#ccc; font-size:86px; text-transform:uppercase; line-height:normal;}
                .gallery ul{display:inline; margin:0; padding:0; list-style:none;}
                .gallery ul li{display:block; float:left; margin:0 10px 10px 0;}
                .gallery ul li img{padding:4px; border:1px solid #BFE009;}
                .gallery ul li.last{margin-right:0;}


                #containerssss{padding:10px 10px;     }
                #contentssss{display:block;border-right:1px solid #ccc; float:left; width:640px;}


                #featured_post{margin-bottom:45px; }
                #featured_post img{display:block; width:620px; height:270px; margin:0; padding:4px; border:1px solid #BFE009;}
                #hpage_latest{display:block; width:100%; }
                #hpage_latest ul{margin:0; padding:0; list-style:none; display:inline;}
                #hpage_latest li{display:block; float:left; width:200px; margin:0 15px 0 0; padding:0;}
                #hpage_latest li.last{margin-right:0;}
                #hpage_latest img{margin:0; padding:4px; border:1px solid #BFE009;}
                #hpage_latest .readmore{text-align:right;}

                /* Comments */

                #comments{margin-bottom:40px;}
                #comments .commentlist{margin:0; padding:0;}
                #comments .commentlist ul{margin:0; padding:0; list-style:none;}
                #comments .commentlist li.comment_odd, #comments .commentlist li.comment_even{margin:0 0 10px 0; padding:15px; list-style:none;}
                #comments .commentlist li.comment_odd{color:#CCCCCC; background-color:#333333;}
                #comments .commentlist li.comment_odd a{color:#BFE009; background-color:#333333;}
                #comments .commentlist li.comment_even{color:#CCCCCC; background-color:#1E1E1E;}
                #comments .commentlist li.comment_even a{color:#BFE009; background-color:#1E1E1E;}
                #comments .commentlist .author .name{font-weight:bold;}
                #comments .commentlist .submitdate{font-size:smaller;}
                #comments .commentlist p{margin:10px 5px 10px 0; padding:0; font-weight:normal; text-transform:none;}
                #comments .commentlist li .avatar{float:right; border:1px solid #EEEEEE; margin:0 0 0 10px;}

                /* ----------------------------------------------Column------------------------------------- */

                #column{display:block; float:right; width:300px; border-left:1px solid #eee;}
                #column .holder{display:block; width:260px; margin-bottom:20px; padding-left:10px;}
                #column .holder, #column #featured{display:block; width:300px; margin-bottom:20px;}
                #column .holder p{line-height:1.6em;}
                #column h2{font-size:20px;}
                #column .holder h2.title{display:block; width:100%; height:65px; margin:0; padding:15px 0 0 0; font-size:20px; line-height:normal; border-bottom:1px dashed #666666;}
                #column .holder h2.title img{float:left; margin:-15px 8px 0 0; padding:5px; border:1px solid #666666;}
                #column .holder p.readmore{display:block; width:100%; font-weight:bold; text-align:right; line-height:normal;}
                #column div.imgholder{display:block; width:290px; margin:0 0 10px 0; padding:4px; border:1px solid #666666;}

                /* Featured Block */


                /* Homepage */

                #column #latestnews{background-size: contain;display:block; width:100%; margin:0; padding:0; list-style:none;}
                #column #latestnews li{background-size: contain;display:block; width:100%; min-height:99px; margin:0 0 25px 0; padding:0 0 15px 0; border-bottom:1px dotted #C7C5C8; overflow:hidden;}
                #column #latestnews li.last{padding-bottom:0; margin-bottom:0; border-bottom:none;}
                #column #latestnews p{display:inline;}
                #column #latestnews p strong{display:block; margin-bottom:5px;}
                #column #latestnews img{float:left; margin:0 10px 0 0; padding:4px; border:1px solid #BFE009; clear:left;}



                #columnss #latestnewssss{background-size: contain;display:block; width:100%; margin:0; padding:0; list-style:none;}
                #columnss #latestnewssss li{display:block; width:100%; min-height:99px; margin:0 0 25px 0; padding:0 0 15px 0; border-bottom:1px dotted #C7C5C8; overflow:hidden;}
                #columnss #latestnewssss li.last{padding-bottom:0; margin-bottom:0; border-bottom:none;}
                #columnss #latestnewssss p{display:inline;}
                #columnss #latestnewssss p strong{display:block; margin-bottom:5px;}
                #columnss #latestnewssss img{float:left; margin:0 10px 0 0; padding:4px; border:1px solid #BFE009; clear:left;}

                #columnss{overflow:hidden; display:block; float:left; width:300px; margin-left:660px;margin-top:-770px;}
                #columnss .holder{display:block; width:260px; margin-bottom:20px; padding-left:10px;}
                #columnss .holder, #column #featured{display:block; width:300px; margin-bottom:20px;}
                #columnss .holder p{line-height:1.6em;}
                #columnss h2{font-size:20px;}
                #columnss .holder h2.title{display:block; width:100%; height:65px; margin:0; padding:15px 0 0 0; font-size:20px; line-height:normal; border-bottom:1px dashed #666666;}
                #columnss .holder h2.title img{float:left; margin:-15px 8px 0 0; padding:5px; border:1px solid #666666;}
                #columnss .holder p.readmore{display:block; width:100%; font-weight:bold; text-align:right; line-height:normal;}
                #columnss div.imgholder{display:block; width:290px; margin:0 0 10px 0; padding:4px; border:1px solid #666666;}





                /* ----------------------------------------------footersss------------------------------------- */

                #footersss{padding:30px 0;}
                #footersss h2, #footersss p, #footersss ul, #footersss a{margin:0; padding:0; font-weight:normal; list-style:none; line-height:normal;}
                #footersss h2{padding:0 0 5px 0; color:#585858; background-color:#ccc; border-bottom:1px dotted #585858; font-size:16px; font-weight:bold; margin-bottom:20px;}
                #footersss li{margin-bottom:15px;}
                #footersss .footbox{display:block; float:left; width:210px; margin:0 40px 0 0; padding:0;}
                #footersss .flickr li{display:block; float:left; width:80px; height:80px; margin:0 7px 15px 7px; padding:4px; border:1px solid #BFE009;}
                #footersss .banners li{display:block; width:200px; height:150px; margin:0 0 15px 0; padding:4px; border:1px solid #BFE009;}
                #footersss .last{margin:0;}

                /* ----------------------------------------------Copyright------------------------------------- */

                #copyright{padding:15px 0;}
                #copyright p{margin:0; padding:0;}
                       </style>

                    <div  class="wrapper col4">
                  <div id="containerssss">
                    <div id="contentssss">
                    <p>Featured News</p>
                      <div id="featured_post"><img src="images/demo/620x270.gif" alt="" />
                        <p>This is a W3C standards compliant free website template from <a href="http://www.os-templates.com/">OS Templates</a>.</p>
                        <p>This template is distributed using a <a href="http://www.os-templates.com/template-terms">Website Template Licence</a>, which allows you to use and modify the template for both personal and commercial use when you keep the provided credit links in the footer. For more CSS templates visit <a href="http://www.os-templates.com/">Free Website Templates</a>.</p>
                      </div>
                      <div id="hpage_latest">
                        <ul>
                          <li><img src="images/demo/190x80.gif" alt="" />
                            <p>Nullamlacus dui ipsum conseqlo borttis non euisque morbipen a sdapibulum orna.</p>
                            <p>Urnau ltrices quis curabitur pha sellent esque congue magnisve stib ulum quismodo nulla et.</p>
                            <p class="readmore"><a href="#">Continue Reading &raquo;</a></p>
                          </li>
                          <li><img src="images/demo/190x80.gif" alt="" />
                            <p>Nullamlacus dui ipsum conseqlo borttis non euisque morbipen a sdapibulum orna.</p>
                            <p>Urnau ltrices quis curabitur pha sellent esque congue magnisve stib ulum quismodo nulla et.</p>
                            <p class="readmore"><a href="#">Continue Reading &raquo;</a></p>
                          </li>
                          <li class="last"><img src="images/demo/190x80.gif" alt="" />
                            <p>Nullamlacus dui ipsum conseqlo borttis non euisque morbipen a sdapibulum orna.</p>
                            <p>Urnau ltrices quis curabitur pha sellent esque congue magnisve stib ulum quismodo nulla et.</p>
                            <p class="readmore"><a href="#">Continue Reading &raquo;</a></p>
                          </li>
                        </ul>
                        <br class="clear" />
                      </div>
                    </div>
                    <div id="column">
                    <p style="margin-left:10px;">Events</p>
                      <ul id="latestnews">

                        <li><img src="images/demo/80x80.gif" alt="" />
                          <p><strong><a href="#">Indonectetus facilis leo.</a></strong> Nullamlacus dui ipsum cons eque lobor ttis non euis que morbi penas dapi bulum orna. Urnaul trices quis curabitur.</p>
                        </li>
                        <li><img src="images/demo/80x80.gif" alt="" />
                          <p><strong><a href="#">Indonectetus facilis leo.</a></strong> Nullamlacus dui ipsum cons eque lobor ttis non euis que morbi penas dapi bulum orna. Urnaul trices quis curabitur.</p>
                        </li>
                        <li><img src="images/demo/80x80.gif" alt="" />
                          <p><strong><a href="#">Indonectetus facilis leo.</a></strong> Nullamlacus dui ipsum cons eque lobor ttis non euis que morbi penas dapi bulum orna. Urnaul trices quis curabitur.</p>
                        </li>
                        <li><img src="images/demo/80x80.gif" alt="" />
                          <p><strong><a href="#">Indonectetus facilis leo.</a></strong> Nullamlacus dui ipsum cons eque lobor ttis non euis que morbi penas dapi bulum orna. Urnaul trices quis curabitur.</p>
                        </li>
                        <li class="last"><img src="images/demo/80x80.gif" alt="" />
                          <p><strong><a href="#">Indonectetus facilis leo.</a></strong> Nullamlacus dui ipsum cons eque lobor ttis non euis que morbi penas dapi bulum orna. Urnaul trices quis curabitur.</p>
                        </li>
                      </ul>

                    </div>
                    <br class="clear" />
                     <div id="columnss">
                    <p>Latest News</p>
                      <ul id="latestnewssss">

                        <li><img src="images/demo/80x80.gif" alt="" />
                          <p><strong><a href="#">Indonectetus facilis leo.</a></strong> Nullamlacus dui ipsum cons eque lobor ttis non euis que morbi penas dapi bulum orna. Urnaul trices quis curabitur.</p>
                        </li>
                        <li><img src="images/demo/80x80.gif" alt="" />
                          <p><strong><a href="#">Indonectetus facilis leo.</a></strong> Nullamlacus dui ipsum cons eque lobor ttis non euis que morbi penas dapi bulum orna. Urnaul trices quis curabitur.</p>
                        </li>
                        <li><img src="images/demo/80x80.gif" alt="" />
                          <p><strong><a href="#">Indonectetus facilis leo.</a></strong> Nullamlacus dui ipsum cons eque lobor ttis non euis que morbi penas dapi bulum orna. Urnaul trices quis curabitur.</p>
                        </li>
                        <li><img src="images/demo/80x80.gif" alt="" />
                          <p><strong><a href="#">Indonectetus facilis leo.</a></strong> Nullamlacus dui ipsum cons eque lobor ttis non euis que morbi penas dapi bulum orna. Urnaul trices quis curabitur.</p>
                        </li>
                        <li class="last"><img src="images/demo/80x80.gif" alt="" />
                          <p><strong><a href="#">Indonectetus facilis leo.</a></strong> Nullamlacus dui ipsum cons eque lobor ttis non euis que morbi penas dapi bulum orna. Urnaul trices quis curabitur.</p>
                        </li>
                      </ul>

                    </div>
                        <br class="clear" />

@字符集“utf-8”；
.clear{clear:两者；}
br.clear{clear:both；页边顶部：-15px；}
img{
高度：自动；
}
/*----------------------------------------------------包装器-------------------------------------------*/
div.wrapper{显示：块；宽度：100%；边距：0；文本对齐：左；}
div.wrapper h1、div.wrapper h2、div.wrapper h3、div.wrapper h4、div.wrapper h5、div.wrapper h6{字体大小：20px；字体重量：粗体；线条高度：正常；}
.col1{颜色：黑色；字体大小：粗体；背景色：#eee；}
.col2{颜色：黑色；字体大小：粗体；背景色：#eee；}
.col3{颜色：黑色；字体大小：粗体；背景色：#eee；填充：20px 0；边框底部：1px实心#839B05；}
.col4{color:black；font-weight:bold；背景色：#eee；边框底部：1px solid#839B05；}
.col5{颜色：黑色；字体大小：粗体；背景色：#ccc；}
.col6{颜色：黑色；字体大小：粗体；背景色：#ccc；边框顶部：1px实心#839B05；边框底部：1px实心#839B05；}
.col7.col7a{颜色：红色；背景色：#151515；}
#containerssss、.gallery、#footersss、#版权{显示：块；位置：相对；边距：0自动；}
.gallery{填充：20px 0 30px 0；背景大小：contain；}
.wrapper.gallery h2{显示：块；文本对齐：中心；边距：0 0 20px 0；填充：0；颜色：#2C2C2C；背景色：#ccc；字体大小：86px；文本转换：大写；行高：正常；}
.gallery ul{显示：内联；边距：0；填充：0；列表样式：无；}
.gallery ul li{显示：块；浮点：左；边距：0 10px 10px 0；}
.图库ul li img{填充：4px；边框：1px实心35; BFE009；}
.gallery ul li.最后{右边距：0；}
#容器SSS{padding:10px 10px；}
#contentssss{display:block；border right:1px solid#ccc；float:left；width:640px；}
#特色文章{页边距底部：45px；}
#特色图片{显示：块；宽度：620px；高度：270px；边距：0；填充：4px；边框：1px实心35; BFE009；}
#hpage_最新{显示：块；宽度：100%；}
#hpage_最新ul{边距：0；填充：0；列表样式：无；显示：内联；}
#hpage_最新li{显示：块；浮点：左；宽度：200px；边距：0 15px 0 0；填充：0；}
#hpage_last li.last{右边距：0；}
#hpage_最新img{边距：0；填充：4px；边框：1px实心35; BFE009；}
#hpage_latest.readmore{text align:right；}
/*评论*/
#注释{页边距底部：40px；}
#comments.commentlist{margin:0；padding:0；}
#commentlist ul{margin:0；padding:0；列表样式：none；}
#comments.commentlist li.comments_odd，#comments.commentlist li.comments_偶数{边距：0 0 10px 0；填充：15px；列表样式：无；}
#comments.commentlist li.comment_odd{color:#CCCCCC；background color:#333333；}
#comments.commentlist li.comment_odd a{color:#BFE009；背景色：#333333；}
#comments.commentlist li.comment#u偶数{颜色：#CCCCCC；背景色：#1E1E；}
#comments.commentlist li.comment_偶数a{color:#BFE009；背景色：#1e；}
#comments.commentlist.author.name{font-weight:bold；}
#comments.commentlist.submitdate{font size:small；}
#comments.commentlist p{margin:10px 5px 10px 0；padding:0；字体重量：正常；文本转换：无；}
#comments.commentlist li.avatar{float:right；border:1px solid#EEEEEE；margin:010px；}
/*----------------------------------------------------列-------------------------------------------*/
#列{显示：块；浮点：右；宽度：300px；边框左：1px实心#eee；}
#列保持器{显示：块；宽度：260px；页边距底部：20px；左填充：10px；}
#column.holder，#column#特色{显示：块；宽度：300px；边距底部：20px；}
#列.保持器p{线高度：1.6em；}
#h2列{字体大小：20px；}
#column.holder h2.标题{显示：块；宽度：100%；高度：65px；边距：0；填充：15px 0；字体大小：20px；线条高度：正常；边框底部：1px虚线35; 666666；}
#列.holder h2.title img{float:left；margin:-15px 8px 0；padding:5px；border:1px solid#666666；}
#column.holder p.readmore{display:block；width:100%；font-weight:bold；text-align:right；line-height:normal；}
#列div.imgholder{显示：块；宽度：290px；边距：0 0 10px 0；填充：4px；边框：1px实心#666666；}
/*特色街区*/
/*主页*/
#列#最新新闻{背景大小：包含；显示：块；宽度：100%；边距：0；填充：0；列表样式：无；}
#列#最新新闻li{背景大小：包含；显示：块；宽度：100%；最小高度：99px；边距：0 0 25px 0；填充：0 0 15px 0；边框底部：1px虚线#C7C5C8；溢出：隐藏；}
#列#latestnews li.last{填充底部：0；空白底部：0；边框底部：无；}
#列#最新新闻{display:inline；}
#列#latestnews p strong{显示：块；页边距底部：5px；}
#列#latestnews img{浮点：左；边距：0 10px 0；填充：4px；边框：1px实心#BFE009；清除：左；}
#专栏#最新新闻{背景大小：续
@media screen and (min-width: 480px) {
    body {
        background-color: lightgreen;
    }
}

@media screen and (min-width: 860) {
    body {
        background-color: lightgreen;
    }
}