使用Metro-UI-CSS进行响应
使用Metro-UI-CSS进行响应
提问于 2014-02-06 04:08:04
我正在使用Metro-UI-CSS，我遇到了一个问题，需要帮助。请参阅blow Images。另外，我想知道我可以在同一页中使用JQuery 1和2。
<body class="metro">
<div style="padding: 10px 0;" class="container">
<div style="padding: 10px 0;" class="container">
<div class="grid no-margin">
<div class="row no-margin">
<div class="span6">
<div class="span3 bg-amber padding10">
<h3 style="padding:0 0 20px 10px; font-size:1.2em" class="border-bottom fg-white">Company Infomation</h3>
</div>
<div class="span3 bg-red padding10">
<h3 style="padding:0 0 20px 10px; font-size:1.2em" class="border-bottom fg-white">Latest Travel News</h3>
</div>
<div class="span3 bg-lighterBlue padding10">
<h3 style="padding:0 0 20px 10px; font-size:1.2em" class="border-bottom fg-white">Book with Confidence</h3>
</div>
<div class="span3 bg-pink padding10">
<h3 style="padding:0 0 20px 10px; font-size:1.2em" class="border-bottom fg-white">Quick links</h3>
</div>
</div>
<div class="span6">
<div class="padding10 bg-orange">
<h3 style="padding:0 0 20px 10px; font-size:1.2em" class="border-bottom fg-white">
Cheapest Flight Tickets for Worldwide Destinations</h3>
</div>
</div>
</div>
</div>
</div>
</div>
</body>当前视图：http://i.stack.imgur.com/FxISt.png
我需要这个：http://i.stack.imgur.com/1nlbh.png
回答 2
Stack Overflow用户
发布于 2014-03-28 16:12:59
好的，经过多次修改，这就是你的结果。
基本上，你正在制作一个只有一行的大网格。在span6 (左侧)中，您正在制作另一个具有两行和4个按钮的网格。
另一个span6 (右侧)用于较大的橙色div，其宽度等于左侧两行的高度。
希望大家都明白了
<body class="metro">
<div style="padding: 10px 0;" class="container">
<div class="grid no-margin">
<div class="row no-margin">
<div class="span6">
<div class="grid no-margin">
<div class="row no-margin">
<div class="span3 bg-amber padding10">
<h3 style="padding:0 0 20px 10px; font-size:1.2em" class="border-bottom fg-white">Company Infomation</h3>
</div>
<div class="span3 bg-red padding10">
<h3 style="padding:0 0 20px 10px; font-size:1.2em" class="border-bottom fg-white">Latest Travel News</h3>
</div>
</div>
<div class="row no-margin" style="padding:10px 0">
<div class="span3 bg-lighterBlue padding10">
<h3 style="padding:0 0 20px 10px; font-size:1.2em" class="border-bottom fg-white">Book with Confidence</h3>
</div>
<div class="span3 bg-pink padding10">
<h3 style="padding:0 0 20px 10px; font-size:1.2em" class="border-bottom fg-white">Quick links</h3>
</div>
</div>
</div>
</div>
<div class="span6">
<div class="grid no-margin">
<div class="row no-margin">
<div class="span6 padding10 bg-orange" style="height:180px">
<h3 style="padding:0 0 20px 10px; font-size:1.2em; " class="border-bottom fg-white">Cheapest Flight Tickets for Worldwide Destinations</h3>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>Stack Overflow用户
发布于 2014-02-06 04:41:36
你能提供一个小提琴手吗？我从来没有听说过CSS响应式框架..我会列三列，33%，33%，66%..将它们向左浮动(并清除它)。然后我会在每一列中放置我的颜色div。在第三列中，因为它是一个div，所以我将设置一个静态高度，以确保跨浏览器的大小保持不变。而不是用边距来确保每件事都是均匀的。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/21587390
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号