0

私はいくつかの要素を並べてフロートしました。私がやりたいことは.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>
4

1 に答える 1

0

メディアクエリはあなたが望むものです：

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

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

例えば

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

    .line {
            // your css rules 
        }
}
于 2013-02-11T10:16:03.140 に答える