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/

e.g。

@media screen and (max-width: 768px) {

    .line {
            // your css rules 
        }
}

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

1 个答案: