1

私はCSSとjQueryが初めてです。次のように、Web サイトにタイルを配置しようとしています。

ボックス

私は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

これを試して。こちらもお読みください

<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 に答える
0

私は twitter ブートストラップを使用してきました。行またはコンテナーを定義し、ブートストラップに列の数と画面スペースの比率を比較的簡単な方法で指定できます。

CSSとjQueryも初めてなので、ブートストラップを使用しました。

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

于 2013-03-13T07:24:07.557 に答える
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

これを試して：

<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 に答える