我正在使用 Metro-UI-CSS，我遇到了一个问题，需要帮助。请参见打击图像。我还想知道我可以在同一页面中使用 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>
当前 View : http://i.stack.imgur.com/FxISt.png
最佳答案
好的，经过大量调整后，这是您的结果。
基本上，您正在制作一个只有 1 行的大网格。在 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>
关于jquery - 响应 Metro-UI-CSS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21587390/