如何归档此响应式设计？(How can I archive this responsive design?)

我正在尝试使用CSS进行这种响应式设计。

当有足够的空间来显示整个长度时，它基本上应该是600px宽度。如果没有，它会折叠，然后右侧部分出现在左侧部分的底部。我正在努力如何归档这个。

这是DEMO ，我可以走到这一步 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{ }

I'm trying to make this kind of responsive design with CSS.

It basically should be 600px width when there's enough space to show whole length. When not, it folds, then right partial come appears on the bottom of left partial. I'm struggling how to archive this.

This is DEMO that I could go this far 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{ }

最满意答案

您不需要对此设计进行媒体查询 - 您可以在调整浏览器大小时使用内联块来折叠布局。

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/

这将在浏览器调整大小时折叠设计 - 我向right_partial添加了30px的底部边距，以确保列表堆栈正确。

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.

更多推荐