gpt4 book ai didi

jquery - 响应 Metro-UI-CSS

转载 作者:行者123 更新时间:2023-11-28 17:54:21 26 4
gpt4 key购买 nike

我正在使用 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

我需要这个: http://i.stack.imgur.com/1nlbh.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/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com