JSFiddle - React, Tailwind, and code Playground

by 亮 薛

HTML

<div class="box1">
    <div class="box2">
    	<span>电子相册</span>
        <div class="box3">
        	<div class="box31">
            	  <img id="1" src="http://i8.tietuku.com/a44672a97df79dd5.jpg" />
                <img id="2" src="http://i8.tietuku.com/4166fb68abfda9b5.jpg" />
                <img id="3" src="http://i8.tietuku.com/5e43a074c1bf0413.jpg" />
                <img id="4" src="http://i8.tietuku.com/f307c1b1d4bed1e4.jpg" />
                <img id="5" src="http://i8.tietuku.com/18db0893090f2b87.jpg" />
                <img id="6" src="http://i8.tietuku.com/f69961ea9b3f01b1.jpg" />
                <img id="7" src="http://i8.tietuku.com/eb063b9b88b6181d.jpg" />
                <img id="8" src="http://i8.tietuku.com/d933b15907faabef.jpg" />
            </div>
            	<ul>
                	<li><a href="#1"><img src="http://i8.tietuku.com/a44672a97df79dd5.jpg" /></a></li>
                    <li><a href="#2"><img src="http://i8.tietuku.com/404971816845c009.jpg" /></a></li>
                    <li><a href="#3"><img src="http://i8.tietuku.com/64f30fc3a93526de.jpg" /></a></li>
                    <li><a href="#4"><img src="http://i8.tietuku.com/84e93c979353d2c4.jpg" /></a></li>
                    <li><a href="#5"><img src="http://i8.tietuku.com/a7448e7f06a14365.jpg" /></a></li>
                    <li><a href="#6"><img src="http://i8.tietuku.com/4f726a28c540b9a1.jpg" /></a></li>
                    <li><a href="#7"><img src="http://i8.tietuku.com/4c962ac146a2fa94.jpg" /></a></li>
                    <li><a href="#8"><img src="http://i8.tietuku.com/ab03120f0d1d0b41.jpg" /></a></li>
                </ul>
        </div>
    </div>
</div>

CSS

*{margin:0; padding:0;}
ul li{list-style:none;}
.box1{width:560px; height:464px;background:#444;}
.box2{width:532px; height:405px;margin-top:17px; float:left;border:2px #ccc solid;position:relative;}
.box2 span{display:block; color:white; font-size:22px;font-height:22px;text-align:center; margin-top:15px;}
.box3{width:503px; height:298px;margin-top:40px; margin-left:27px; border:2px #fff solid;border-right:none;overflow:hidden;float:right;position:absolute;right:0;bottom:45px;}
.box31{width:400px; height:298px; float:left;overflow:hidden;}
.box31 img{width:400px; height:298px;}
.box3 ul{width:100px; height:298px; display:block; float:right;overflow:auto;}
.box3 ul li img{width:70px; height:58px;border:1px white solid;}