I'm asking for help from frontend div css experts on how to design this layout_html/css_WEB-ITnose

The picture is a rendering, the thumbnail and the large picture are in the picture position. It is required to use div css. The personal front desk is not good, woo woo!


Thanks for the help.

Reply to the discussion (solution)

You can directly use the table to implement it

In addition, because it is not good, you have to do it yourself

I don’t know how to implement the thumbnail in the middle. Should I use controls?

If the network speed is not a problem and the server pressure is not high, the thumbnail is very simple and can be set directly to 780dcbe64dfc190eb33c0958a5656995, and it will It will automatically zoom in and out

The thumbnail can be generated in the background, or you can use jquery's autoIMG plug-in to generate the thumbnail

The middle part is easy to implement

 <style type="text/css">        div {            height:200px;            overflow-y:scroll;            outline:1px solid #ccc;        }        ul {            list-style-type:none;            padding-left:0;        }        li img {            vertical-align:middle;        }    </style>

 <div>       <ul>           <li>               <label><input type="checkbox" />序号</label> <img src="http://img1.cache.netease.com/cnews/2013/5/6/201305061059507553b.png" />           </li>           <li>               <label><input type="checkbox" />序号</label> <img src="http://img1.cache.netease.com/cnews/2013/5/6/201305061059507553b.png" />           </li>           <li>               <label><input type="checkbox" />序号</label> <img src="http://img1.cache.netease.com/cnews/2013/5/6/201305061059507553b.png" />           </li>           <li>               <label><input type="checkbox" />序号</label> <img src="http://img1.cache.netease.com/cnews/2013/5/6/201305061059507553b.png" />           </li>           <li>               <label><input type="checkbox" />序号</label> <img src="http://img1.cache.netease.com/cnews/2013/5/6/201305061059507553b.png" />           </li>           <li>               <label><input type="checkbox" />序号</label> <img src="http://img1.cache.netease.com/cnews/2013/5/6/201305061059507553b.png" />           </li>       </ul>   </div>