css根据屏幕大小从左侧动态增加条形宽度

Question

你喜欢把面包屑和其他一些内容放在中间和后面，有从左到右设置的背景。从左边全宽 这是图像。

<div class="yellow_bend">
    <div class="content_wrapper">
        <div class="category_links">
            <ul class="category_ul clearfix">
                <li class="first_li"><a href="javascript:void(0);">Tripping 

Canoes<i class="fa fa-chevron-circle-right"></i></a>
                </li>
                <li><a href="javascript:void(0);">Sportsman Canoes<i class="fa 

fa-chevron-circle-right"></i></a>
                </li>
                <li><a href="javascript:void(0);">Solo Canoes<i class="fa fa-

chevron-circle-right"></i></a>
                </li>
                <li><a href="javascript:void(0);">Racing Canoes<i class="fa 

fa-chevron-circle-right"></i></a>
                </li>
                <li class="last_li"><a href="javascript:void(0);">Specialty 

Canoes<i class="fa fa-chevron-circle-right"></i></a>
                </li>
            </ul>
            <!-- end category_ul -->
        </div>
        <!-- end category_links -->
    </div>
    <!-- end content_wrapper -->
</div>

CSS

 .yellow_bend {
     background:#e2aa12;
     position:absolute;
     left:0;
     min-height:32px;
     height:32px\9;
     min-width:300px;
     top:0
 }
 .yellow_bend:after {
     background:url(../images/cc_ylw_end.png) center right no-repeat;
     right:-35px;
     height:32px;
     width:50px;
     top:0;
     z-index:-1
 }
 .yellow_bend:before {
     background:#e2aa12;
     width:100%;
     height:32px
 }
 .category_ul li a {
     color:#1f1f1f;
     font-weight:500;
     font-size:12px;
     line-height:10px
 }
 .yellow_bend:after, .yellow_bend:before {
     position:absolute;
     content:''
 }
 .content_wrapper {
     width:960px;
     margin:0 auto;
     position:relative
 }

Answer 1

如果你想在页面上只扩展html元素的一面，你需要在css属性之前和之后使用

HTML

<div id="page-wrap">
     <h2 class="left-only">To the left, to the left</h2>

    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>

CSS

* {
    margin: 0;
    padding: 0;
}
#page-wrap {
    width: 50%;
    margin: 100px auto;
}
h1, h2, p {
    margin: 20px 0;
}
h2 {
    background: black;
    color: white;
    padding: 15px 0;
    position: relative;
}
h2:before, h2:after {
    content:"";
    background: black;
    position: absolute;
    top: 0;
    bottom: 0;
    width: 9999px;
}
h2:before {
    right: 100%;
}
h2:after {
    left: 100%;
}
.left-only:after {
    display: none;
}

有用的js链接http://jsfiddle.net/LEesQ/

这是关于CSS技巧http://css-tricks.com/full-browser-width-bars/

的原创文章

希望这有帮助！