html - 使一组浮动元素响应调整大小

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 
        }
}