1

レイアウトを整理するのに 7 時間以上費やしましたが、最終製品をこれらの線に沿ったものにしたいと思っています - !のように見せたい

代わりに私はこれを手に入れます！現在のように見えます

使用されているコードはこちら

HTML -

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<head>

<title>_Box</title>

<link href="styles.css" rel="stylesheet" type="text/css">

<body>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="masonry.js"></script>
<script>
  $(function(){
  $('#container').masonry({
    columnWidth: 150,
    itemSelector: 'div' 
    });
});
</script>

<div id="container" class="clearfix masonry">

<div class="item1"><img src="images/eventbox.png"></img></div>
<div class="item3"><img src="images/forumbox.png"></img></div>
<div class="item2"><img src="images/weekbox.png"></img></div>
<div class="item2"><img src="images/weekbox.png"></img></div>
<div class="item2"><img src="images/weekbox.png"></img></div>
<div class="item2"><img src="images/weekbox.png"></img></div>
<div class="item3"><img src="images/top10box.png"></img></div>
<div class="item1"><img src="images/eventbox.png"></img></div>

</div>

</head>
</body>

CSS -

html {
  height:100%;
}

body {
  width:900px;
  height:100%;
  margin:0 auto;
  margin-top:100px;
  background-image: url(images/gridbg.png);
}

#container {
    width:900px;
}

.item1,.item2,.item3 {margin:5px;}
.item1 {width:350px;}
.item2 {width:175px;}
.item3 {width:150px;}

何か案は？何もうまくいかないようだから

4

1 に答える 1