1

我对 CSS 和 jQuery 有点陌生。我正在尝试在网站上定位图块，如下所示：

盒子

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

现在

任何人都有任何线索，我怎样才能得到这样的瓷砖定位。

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

4 回答 4

0

我一直在使用 twitter bootstrap - 您可以定义一行或一个容器，并以相对简单的方式告诉 bootstrap 有多少列以及屏幕空间的比例。

我使用引导程序是因为我对 CSS 和 jQuery 也很陌生。

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

于 2013-03-13T07:24:07.557 回答
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-13T08:11:56.857 回答
0

这是我的最终代码，使用 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;

}

最终瓷砖

于 2013-03-13T10:11:22.020 回答
0

试试这个。也读这个

<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-13T12:34:40.150 回答