Question

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

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

这是 DEMO ，我可以走到这一步 http://jsfiddle.net/a7Fkj/5/

enter image description here

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{

}

Answer 1

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

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 { 最小宽度：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的底部边距，以确保列表堆栈正确。

如何归档此响应式设计？

1 个答案: