1. 首页
  2. 问答
  3. 10用jQuery或CSS定位的瓷砖

10用jQuery或CSS定位的瓷砖

2013-03-13 126 views
1

我对CSS和jQuery很陌生。我试图位置瓷砖的网站如下：10用jQuery或CSS定位的瓷砖

boxes

我一直在用CSS和jQuery的砌体很努力，但我已经得到最接近的是这样的：

now

任何人都有任何线索如何让瓷砖定位。

<body> 

<nav id="container"> 
    <div class="t1">1</div> 
    <div class="t2">2</div> 
    <div class="t3">3</div> 
    <div class="t4">4</div> 
    <div class="t5">5</div> 
    <div class="mi">MIDDLE</div> 
    <div class="t6">6</div> 
    <div class="t7">7</div> 
    <div class="t8">8</div> 
    <div class="t9">9</div> 
    <div class="t10">10</div> 
</div> 
</div> 
</nav>

CSS

#container { 
    margin:auto; 
    cursor:pointer; 
    width:600px; 
    margin-top:140px; 
} 
.t1, .t2 { 
padding:8px; 
height:120px; 
width:300px; 
float:left; 
background-color:orange; 
border:black thin solid; 
} 
.t3, .t4, .t5 { 
padding:8px; 
height:120px; 
width:240px; 
float:left; 
background-color:orange; 
border:black thin solid; 
} 

.t6, .t7, .t8 { 
padding:8px; 
height:120px; 
width:30%; 
float:left; 
background-color:orange; 
border:black thin solid; 
} 

.t9, .t10 { 
padding:8px; 
height:120px; 
width:300px; 
float:left; 
background-color:orange; 
border:black thin solid; 
} 
.mi { 
height:360px; 
width:400px; 
background-color:blue; 
float:left; 
}

来源

2013-03-13 HairLessDude

+1

你可以把代码放在这里吗？ – hjpotter92 2013-03-13 07:22:53

回答

0

这是我最后的代码，使用引导：

HTML 

<div class="row"> 
<div class="span6">BOX 1</div> 
<div class="span6">BOX 2</div> 
</div> 
<div class="row"> 
<div class="span2"> 
    <div class="row"> 
     <div class="span12">BOX 3</div> 
    </div> 
    <div class="row"> 
     <div class="span12">BOX 4</div> 
    </div> 
    <div class="row"> 
     <div class="span12">BOX 5</div> 
    </div> 
</div> 
<div class="span8"> 
    BOX with blue background 
</div> 
<div class="span2"> 
    <div class="row"> 
     <div class="span12">BOX 5</div> 
    </div> 
    <div class="row"> 
     <div class="span12">BOX 7</div> 
    </div> 
    <div class="row"> 
     <div class="span12">BOX 8</div> 
    </div> 
</div> 
</div> 
<div class="row"> 
<div class="span6">BOX 9</div> 
<div class="span6">BOX 10</div> 
</div> 


</div> 
</body>

CSS

#contain { 
    margin:auto; 
    margin-top:120px; 
    margin-left:600px; 
} 
.span6 { 
    background:#06C; 
    width:300px; 
    height:120px; 
    border:black thin solid; 
    margin-left:-20px; 
} 
.span12 { 
    background:#9C0; 
    width:100px; 
    height:120px; 
    border:black thin solid; 
    margin-left:-20px; 
} 
.span8 { 
    background:#903; 
    width:400px; 
    height:364px; 
    border:black thin solid; 
    margin-left:-80px; 
    margin-top:0px; 

}

Final tiles

来源

2013-03-13 10:11:22 HairLessDude

0

我一直在使用Twitter的引导 - 你可以定义一个行或容器，并告诉引导多少colums什么比例的屏幕空间，使他们在一个比较容易的方式。

我使用了bootstrap，因为我对CSS和jQuery也很新颖。

http://twitter.github.com/bootstrap/

来源

2013-03-13 07:24:07

+0

感谢您的帮助，我试图找出答案。 – HairLessDude 2013-03-13 08:27:42

0

试试这个：

<div class="row"> 
<div class="span6">BOX 1</div> 
<div class="span6">BOX 2</div> 
</div> 
<div class="row"> 
<div class="span2"> 
    <div class="row"> 
     <div class="span12">BOX 3</div> 
    </div> 
    <div class="row"> 
     <div class="span12">BOX 4</div> 
    </div> 
    <div class="row"> 
     <div class="span12">BOX 5</div> 
    </div> 
</div> 
<div class="span8"> 
    BOX with blue background 
</div> 
<div class="span2"> 
    <div class="row"> 
     <div class="span12">BOX 5</div> 
    </div> 
    <div class="row"> 
     <div class="span12">BOX 7</div> 
    </div> 
    <div class="row"> 
     <div class="span12">BOX 8</div> 
    </div> 
</div> 
</div> 
<div class="row"> 
<div class="span6">BOX 9</div> 
<div class="span6">BOX 10</div> 
</div>

也许你必须改变行元素padding和margin，它适合电网。

来源

2013-03-13 08:11:56 t00thy

+0

我应该在twitter引导中使用该代码吗？谢谢您的帮助 – HairLessDude 2013-03-13 08:27:27

0

试试这个。另请阅读this

<style type="text/css"> 
div{ 
    border:thin solid #000 
} 
#container{ 
    width:100%; 
} 
#container div{ 
    float:left; 
    width:49%;/* make this 50 and turn off borders */ 
height:20% 
} 
#container div:nth-child(odd){ 
    clear:both; 
} 
#container .mi{ 
    position: absolute; 
margin: 0 auto; 
top: 50%; 
height: 50%; 
margin-left: 25%; 
margin-top: -14%; 

} 
</style>  
<nav id="container"> 

    <div class="t1">1</div> 
    <div class="t2">2</div> 
    <div class="t3">3</div> 
    <div class="t4">4</div> 
    <div class="t5">5</div> 

    <div class="t6">6</div> 
    <div class="t7">7</div> 
    <div class="t8">8</div> 
    <div class="t9">9</div> 
    <div class="t10">10</div> 
    <div class="mi">MIDDLE</div> 
</div>

来源

2013-03-13 12:34:40 astroanu

相关问题

 相关问题