何が起こっているのかを示すために jsfiddle で簡単な例を投げてから、私が達成したいことを説明します..
(コード html - jsfiddle 内)
<html>
<head>
</head>
<body>
<div class="box1top">
</div>
<div class="box1middle">
<p> Test </p><br />
<p> Test </p>
</div>
<div class="box1bottom">
</div>
<div class="box1top">
</div>
<div class="box1middle">
<p> Test </p><br />
<p> Test </p>
</div>
<div class="box1bottom">
</div>
</body>
</html>
(コード css - jsfiddle 内)
.box1top {
width: 150px;
height:30px;
background-color:#373737;
margin-left:10px;
margin-right:10px;
margin-top:10px;
}
.box1middle {
width: 150px;
height:200px;
background-color:#676767;
margin-left:10px;
margin-right:10px;
}
.box1bottom {
width: 150px;
height:10px;
background-color:#373737;
margin-left:10px;
margin-right:10px;
}
.box2top {
width: 150px;
height:30px;
background-color:#373737;
margin-left:10px;
margin-right:10px;
}
.box2middle {
width: 150px;
height:200px;
background-color:#676767;
margin-left:10px;
margin-right:10px;
}
.box2bottom {
width: 150px;
height:10px;
background-color:#373737;
margin-left:10px;
margin-right:10px;
}
上記の例では、背景色はテキストを含むボックスの画像になります (3 つの画像に分割されます)。
ただし、これらをブラウザウィンドウに並べて表示するのではなく、並べて表示したい..要素を浮かせてみましたが、うまくいかないようです。
誰かアイデアはありますか?どんな助けでも大歓迎です
ありがとう、カルロス