27
2019
03

li标签实现隔行左右则显示(奇数行、偶数行)

.mk_list{ overflow:hidden}

.mk_list li{overflow:hidden;  margin-bottom:30px; background-color:#fbfbfb}


.mk_list li:nth-of-type(odd) .mk_left{ float:left; width:300px; height:225px; overflow:hidden}

.mk_list li:nth-of-type(odd) .mk_right{ float:right; width:850px; height:auto; }

.mk_list li:nth-of-type(odd) .mk_right h1{ color:#333; font-size:22px; line-height:35px;}

.mk_list li:nth-of-type(odd) .mk_right h2{ font-size:16px; line-height:30px; color:#666; margin-top:30px; font-weight:100; margin-bottom:25px;}



.mk_list li:nth-of-type(even) .mk_left{ float:right; width:300px; height:225px; overflow:hidden}

.mk_list li:nth-of-type(even) .mk_right{ float:left; width:850px; height:auto; }

.mk_list li:nth-of-type(even) .mk_right h1{ color:#333; font-size:22px; line-height:35px;}

.mk_list li:nth-of-type(even) .mk_right h2{ font-size:16px; line-height:30px; color:#666; margin-top:30px; font-weight:100; margin-bottom:25px;}



.mk_list li .mk_left img{ width:100%; height:100%}



<!--内循环开始-->

<div class="coco mk_list"> 

<ul>


            <li class="imgZoom wow animated fadeInUp" data-wow-delay="<%=i%>s"> 

                <div class="mk_left"><img src="/<%=rsnfy("dk_uploadfile")%>" /></div>

                <div class="mk_right">

                <h1><%=rsnfy("title")%></h1>

                    <h2><%=rsnfy("description")%></h2>

                </div>

            </li>


</ul> 

</div>

<!--内循环结束-->


« 上一篇下一篇 »