Question

我是CSS和jQuery的新手。我正试图在网站上定位瓷砖如下：

boxes

我一直在尝试使用CSS和jQuery Masonry，但我最接近的就是这样：

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;
}

Answer 1

我一直在使用twitter bootstrap - 你可以定义一个行或一个容器，并告诉bootstrap有多少colums和屏幕空间的比例以相对简单的方式使它们成为可能。

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

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

Answer 2

试试这个：

<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，以使其适合网格。

Answer 3

这是我的最终代码，使用Bootstrap：

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

Answer 4

试试这个。另请阅读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>

10个用jQuery或CSS定位的瓷砖

4 个答案: