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

You don't need media queries for this design- you can use inline-block to collapse the layout when the browser is resized.

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; margin-bottom: 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/

This will collapse the design when the browser is resized- I added a 30px bottom margin to your right_partial to ensure the list stacks correctly.

于 2013-01-18T16:53:58.813 回答