さまざまな画像とその説明を使用してヘッダーを作成しようとしています。jQueryを使用してコンテンツにマウスオーバーしたときに、それらの説明が表示されるようにします。問題はそこにあると思うので、HTMLとCSSのみを投稿しています。
jQueryは機能しますが、問題は、オーバーフローを使用した後でも、クラスheaderContを使用してdivが次の行にラップアラウンドすることです。誰かがこれで私を助けることができますか？ありがとう。
私は画像を投稿することを許可されていないので、これは私を理解するのに役立つ画像へのリンクです->
http://image.bayimg.com/cabjpaaeg.jpg
http://img145.imageshack.us/img145/3236/cabjpaaeg.jpg
上の画像のPSは、headerContクラスのdivの1つにマウスオーバーしました。画像の横にテキストを配置したい。また、最後のdivは、元の場所ではなく、divの1つが展開されるたびに（それを説明する正しい単語がわからない！）、次の行に折り返されます。
HTMLコード：
<html>
<head>
<title>Silder</title>
<link rel="stylesheet" type="text/css" href="css/default.css" />
</head>
<body>
<div class="header">
<div style="margin: 5px; width:1300px; overflow: hidden;">
<div class="headerCont" style="background-color: #cdcdcd; ">
<div><img src="image/1.jpg" style="height: 317px; width: 214px; float:left; " /></div>
<div style="float:left;margin-left:214px; width: 200px; overflow: hidden;">Discription </div>
</div>
<div class="headerCont" style="background-color: #719501; ">
<div><img src="image/2.jpg" style="height: 317px; width: 214px;" /></div>
<div style="float:left; position:absolute ;margin-left:214px; width: 200px; overflow: hidden;">Discription </div>
</div>
<div class="headerCont" style="background-color: #f3f3f3; ">
<div><img src="image/3.jpg" style="height: 317px; width: 214px;" /></div>
<div style="float:left; position:absolute ;margin-left:214px; width: 200px; overflow: hidden;">Discription </div>
</div>
<div class="headerCont" style="background-color: #719501; ">
<div><img src="image/4.jpg" style="height: 317px; width: 214px;" /></div>
<div style="float:left; position:absolute ;margin-left:186px; width: 200px; overflow: hidden;">Discription </div>
</div>
<div class="headerCont" style="background-color: #f3f3f3;">
<div><img src="image/5.jpg" style="height: 317px; width: 214px;" /></div>
<div style="float:left; position:absolute ;margin-left:214px; width: 200px; overflow: hidden;">Discription </div>
</div>
</div>
</div>
<script type="text/javascript" src="js/jQuery.js" ></script>
<script type="text/javascript" src="js/home.js" ></script>
</body>
CSSコード：
#content{
margin-left: auto;
margin-right: auto;
width: 90%;
border: 2px solid;
border-color: #272727;}
.outter{
border:2px solid #000000;
margin:4px;
position: relative;
}
.header{
width:1300px;
height:400px;
margin-left:auto;
margin-right:auto;
border: 1px solid #000;
margin-bottom:20px;
overflow:hidden;
position: relative;
}
.headerCont{
height: 100%;
width:214px;
padding:5px;
float:left;
overflow:hidden;
position:relative;
}
.header img{
border-color:#000000;
}
JavaScript：
$(".headerCont").mouseover(function(){
$(this).animate({
width:400,
}, 300 );
});
$(".headerCont").mouseout(function(){
$(this).animate({
width: 214,
}, 200 );
});