-2

ページのリンクは次のとおりです: http://www.web-design-talk.co.uk/examples/5/

私が欲しいのは、上記のリンクのページに似ています。しかし、サムネイルを大きな画像の下部に表示するのではなく、右側（書き込み/説明の段落全体が配置されている場所）に表示し、書き込みの段落全体を大きな画像の下部に切り替えたいサムネイルが配置されている画像。

このページを再編成する方法を教えてください。どうもありがとうございました！

これまでに得たものは、http ://www.jsfiddle.net/11mini11/EQBXF/1 で確認できます。

CSSの場合

body{background:url(../img/body-bg.jpg) top left repeat; font-family:"Segoe UI",Calibri,"Myriad Pro",Myriad,"Trebuchet MS",Helvetica,Arial,sans-serif;}

h1 {font-size:1.2em; color:#330066; font-weight:bold; margin:0 0 25px 0; letter-spacing:0.02em;}

h2 {color:#ff0000; font-weight:bold; margin:0 0 10px 0;}
h2 span { font-style:italic; color:#ccc; font-size:0.7em; text-decoration: line-through}

p { font-size: 0.80em; line-height:1.5em; margin:0 0 10px 0}

.center { text-align:center;}
.center a {color:#333; font-weight:bold;}
.center a:hover {color:#666}

#wrap {width:690px; margin:50px auto; display:block; background:url(../images/wrap-bg.jpg) top left repeat-x; padding:25px;}

#left {width:350px; float:left; margin:0 20px 0 0;}

#bigpic {width:320px; height:340px; float:left; margin:0 0 30px 0; }
#bigpic img { display:block; margin:0 auto; width: 252px; }

#thumbs {height:100px; width:350px; clear:both; display:block;}
#thumbs ul li {height:100px;width:100px;display: inline; padding:0 10px 0 0; float:left;}
#thumbs ul li img {border:1px solid #ccc;}
#thumbs ul li img:hover {cursor:pointer;border:1px solid #ddd;}

p#desc {text-align:center;padding: 10px 0}

img#apple {width:188px; margin:0 auto; display:block}

.b {border:1px solid #ccc;}

.curvey {-moz-border-radius:30px; -webkit-border-radius: 30px;}

HTMLの場合

<div id="wrap" class="b curvey">
    <h1>Some Super Amazing iPhone Yay</h1>

    <div id="left">

        <div id="bigpic" class="b">
            <img src="images/big/iphone-3-big.jpg" alt="iPod Shuffle 16GB Zoom View" />

            <p id="desc">iPod Shuffle 16GB Zoom View</p>

        </div>

        <div id="thumbs">
            <ul>
                <li><a href="images/big/iphone-1-big.jpg" rel="images/small/iphone-1-small.jpg">
                        <img src="images/small/iphone-1-small.jpg" alt="iPod Shuffle Front View In Blue!" />
                    </a>
                </li>

                <li>
                    <a href="images/big/iphone-2-big.jpg" rel="images/small/iphone-2-small.jpg">
                        <img src="images/small/iphone-2-small.jpg" alt="iPod Shuffle Dual View Grey!" />
                    </a>
                </li
                >
                <li>
                    <a href="images/big/iphone-3-big.jpg" rel="images/small/iphone-3-small.jpg">
                        <img src="images/small/iphone-3-small.jpg" alt="iPod Shuffle 16GB Zoom View" />
                    </a>
                </li>
            </ul>

        </div>

    </div>


    <h2>&pound;125.99 <span>was &pound;155.99</span></h2>

    <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. Duis aute irure dolor in reprehenderit 
    in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia 
    deserunt mollit anim id est laborum</p>

    <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.</p>

    <img src="images/apple.gif" alt="apple" id="apple" />

    <a href="#" class="button" id="add-to-cart"><span>Add to Basket</span></a>

    <div class="clear"></div>


</div>

<p class="center"><a href="#">&laquo; Back to tutorial at web-design-talk.co.uk ....</a></p>
4

1 に答える 1

0

以下を試してください

#left {
width: 600px;
margin: 0 20px 0 0;
height: 500px;
}

#bigpic {
width: 320px;
height: 340px;
float: left;
margin: 0 0 30px 0;

#thumbs {
height: 400px;
width: 100px;
float: left;
}

#thumbs ul li {
height: 100px;
width: 100px;
padding: 0 10px 0 0;
于 2013-08-24T09:12:27.237 に答える