0

div に 3 つの画像をまとめて配置しようとしています。さらに複雑なのは、画像を非表示にして、マウスを画像の上に置いたときにテキストを表示する必要があることです。

ここに私のHTMLコードがあります:

<div class="TopRow">
<div class="TP">
<div class="TitleM">
  <a href="link">TP</a>
</div>
<div class="showcase">
<img src="image"   alt="TPM"/>
<p >Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <a href="link">>> Shop   </a></p>
</div>
</div>

<div class="SF">
<div class="TitleM">
  <a href="link">Stearns & Foster</a>
</div>
<div class="showcase">
<img src="image"   alt="TPM"/>
<p >Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <a href="link">>> Shop  </a></p>
</div>
</div>

<div class="VS">
<div class="TM">
  <a href="link">VS</a>
</div>
<div class="showcase">
<img src="image"   alt="TPM"/>
<p >Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <a href="link">>> Shop </a></p>
</div>
</div>

ここに私のCSSがあります

<style type="text/css">
div.showcase {height: 241px; width: 300px; border: solid 1px #939598;}
div.showcase p {display: none;}
div.showcase:hover img {display: none;}
div.showcase:hover p {display: block;}

}
.TopRow {
height: auto;
width: 95%;
margin-right: auto;
margin-bottom: 10px;
margin-left: auto;
 }
.TP {
    Float:left;
height: auto;
width: 33%;

.V3 {
margin:0;
height: auto;
width: 33%;

.SF {
    Float:right;
height: auto;
width: 33%;
}
.TM {
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 125%;
background-color: #dce1e9;
text-align: left;
margin-bottom: 3px;
padding-left:0px;
padding-top:5px;
padding-bottom:5px;
height: auto;
width: 100%;
    border: solid 1px #939598;
text-indent: 5px;
}

私の問題がショーケース div の設定サイズにあることはわかっていますが、正しく並べることができません。どんな助けでも大歓迎です。

4

1 に答える 1

0

私はこのフィドルであなたの問題を解決しようとしました: フィドルのために私をクリックしてください 私

はまた、かなりの数のエラーがあったので、あなたのコードを少しきれいにしようとしました.

HTML

<div class="TopRow">
    <div class="TP">
        <div class="TitleM">
            <a href="#">TP</a>
        </div>
        <div class="showcase">
            <img src="http://osric.com/8ball/images/eight-ball.png" alt="TPM"/>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <a href="link">>> Shop   </a></p>
        </div>
    </div>
    <div class="SF">
        <div class="TitleM">
            <a href="#">Stearns &amp; Foster</a>
        </div>
        <div class="showcase">
            <img src="http://osric.com/8ball/images/eight-ball.png"   alt="TPM"/>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <a href="link">>> Shop  </a></p>
        </div>
    </div>
    <div class="VS">
        <div class="TM">
             <a href="#">VS</a>
        </div>
        <div class="showcase">
            <img src="http://osric.com/8ball/images/eight-ball.png"   alt="TPM"/>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <a href="link">>> Shop </a></p>
        </div>
    </div>
</div>

CSS

div.showcase {
    border: solid 1px #939598;
}
div.showcase p {
    visibility:hidden;
}
div.showcase:hover img {
    visibility:hidden;
}
div.showcase:hover p {
    visibility: visible;
}

body {
    margin:0;
}

.TopRow {
    width: 99%;
    margin-bottom: 10px;
}
.TP {
    width:33%;
    display:inline-block;
}
.VS {
    width:33%;    
    display:inline-block;
}
.SF {
    width: 33%;
    display:inline-block;
}
于 2013-08-09T06:23:31.800 に答える