html - 使一组特定的 float 元素响应调整大小

Question

我已经并排 float 了一些元素，我想做的是以某种方式使 .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 
        }
}