使得某一组浮动元素在调整大小时作出响应

Question

我已经并排浮动了一些元素，我想做的是以某种方式使.line元素的宽度缩小。用户调整屏幕大小，以便在某些方面只使这些元素做出响应。我想我可以给.line一个%的宽度或某种溢出，这样当页面缩小时，宽度就会减少或被溢出隐藏，但这些似乎不起作用。有人能推荐另一种选择吗？或者我如何让我的想法发挥作用？我知道我可以使用媒体查询来更改宽度等，但我希望这是自然的，以允许不同的文本大小/长度等

这是代码http://dabblet.com/gist/4753624

CSS

.l {
    float: left;
}
span {
    display: block;
}
.line {
    border-top: 2px solid #000;
    width: 300px;
}
.icon {
    background: url('http://dummyimage.com/40/000/fff') no-repeat 0 0;
    width: 40px;
    height: 40px;
    display: inline-block;
}

HTML

<div class="holder clearfix">
    <div class="headline clearfix"> 
        <span class="l icon ir"></span>
        <span class="l line"></span>
         <h1 class="l">Main HEadline</h1>
        <span class="l line"></span>
        <span class="l icon ir"></span>
    </div>
    <div class="headline clearfix"> 
        <span class="l icon ir"></span>
        <span class="l line"></span>
         <h1 class="l">Main HEadline</h1>
        <span class="l line"></span>
        <span class="l icon ir"></span>
    </div>
</div>

Answer 1

媒体查询是您想要的：

http://www.w3.org/TR/css3-mediaqueries/

http://css-tricks.com/css-media-queries/

例如

@media screen and (max-width: 768px) {
    .line {
            // your css rules 
        }
}