2

このようなレスポンシブデザインをCSSで作ろうとしています。

全長を表示するのに十分なスペースがある場合は、基本的に600pxの幅にする必要があります。
そうでない場合は折りたたまれ、左パーシャルの下部に右パーシャルカムが表示されます。
これをアーカイブする方法に苦労しています。

これは私がここまで行くことができたデモです
http://jsfiddle.net/a7Fkj/5/

ここに画像の説明を入力してください

HTML

<div class="table_row">
    <div class="left_partial">
        <div class="StoreName">Walmart Store</div>
        <div class="Location">Located in California</div>
    </div>

    <div class="right_partial">
        <div class="store_icon"><img src="https://twimg0-a.akamaihd.net/profile_images/616833885/walmart_logo_youtube.jpg"><div>
        <div class="person1">John Smith<div>
        <div class="person2">Mike Tailor<div>
        <div class="person3">Jessica Swan<div>
    </div>

</div>

CSS

div.table_row{
    min-width: 300px;
    margin-bottom: 30px;

}

div.left_partial{
    width: 300px;

}

div.right_partial{
    width: 300px;   
}

div.StoreName{
    background-color: #000000;
    color: #FFFFFF;
}

div.Location{

}

div.store_icon{
    width: 60px;
    height: 60px;
}

div.person1{

}

div.person2{

}

div.person3{

}
4

1 に答える 1

5

このデザインではメディアクエリは必要ありません。ブラウザのサイズが変更されたときに、インラインブロックを使用してレイアウトを折りたたむことができます。

HTML：

<div class="table_row">
    <div class="left_partial">
        <div class="StoreName">Walmart Store</div>
        <div class="Location">Located in California</div>
    </div>

    <div class="right_partial">
        <div class="store_icon"><img src="https://twimg0-a.akamaihd.net/profile_images/616833885/walmart_logo_youtube.jpg" /></div>
        <div class="people">
            <div class="person">John Smith</div>
            <div class="person">Mike Tailor</div>
            <div class="person">Jessica Swan</div>
        </div>
    </div>

</div>

CSS：

div.table_row {min-width：300px; マージンボトム：30px;

}

div.left_partial{
    width: 300px;
    display:inline-block;
    vertical-align:top;

}

div.right_partial{
    width: 300px;   
    display:inline-block;
    vertical-align:top;
    margin-bottom:30px;
}

div.StoreName{
    background-color: #000000;
    color: #FFFFFF;

}

div.Location{

}

div.store_icon{
    width: 60px;
    height: 60px;
    display:inline-block;
    vertical-align:top;
}

div.store_icon img{
    width:100%;
    height:100%;
}
div.people{
    display:inline-block;
    vertical-align:top;
    height:60px;        
    width:234px;
}

jsfiddle： http: //jsfiddle.net/kmMEM/

これにより、ブラウザのサイズが変更されたときにデザインが折りたたまれます。リストが正しくスタックされるように、right_partialに30pxの下マージンを追加しました。

于 2013-01-18T16:53:58.813 に答える