1. 首頁
  2. 問答
  3. 按正確順序顯示圖片框和文本鏈接

按正確順序顯示圖片框和文本鏈接

2016-07-23 103 views
0

我嘗試了很多以正確的順序進行，但無法做到。按正確順序顯示圖片框和文本鏈接

這裏就是我直接使用插件

CSS

<style> 
    .news_lhs { 
     display: table-cell; 
     vertical-align: middle; 
     position: relative; 
     width: 100px; 
     background-color: #fff; 
     padding: 12px; 
     border-right: 1px solid #CCC 
    } 
    .tab-pane>ul li>.news_rhs { 
     display: table-cell; 
     width: auto; 
     font-size: 16px; 
     color: #595959; 
     padding: 10px; 
     vertical-align: top 
    } 
    .tab-pane>ul li>.news_lhs img { 
     width: 80px; 
     display: block 
    } 
    .tab-pane>ul li>.news_rhs a { 
     color: #333; 
     text-decoration: none 
    } 
    .tab-pane>ul li>.news_rhs .openlink { 
     width: 100%; 
     font-size: 14px; 
     padding: 0 0 5px; 
     color: #999; 
     font-weight: 400 
    } 
    .tab-pane>ul li>.news_rhs a.link { 
     color: #DA0000 
    } 
    .tab-pane>ul li>.news_rhs a strong { 
     font-weight: 400 
    } 
    .featureslist h2, 
    .newslist h2, 
    .reviewslist h2 { 
     font-size: 14px; 
     line-height: 18px; 
     font-weight: 400 
    } 
    .news_rhs h2 { 
     margin: 0 
    } 
    .n_opinion, 
    .n_sponsored { 
     line-height: 14px; 
     padding: 2px 4px; 
     text-transform: uppercase; 
     font-weight: 700; 
     margin-bottom: 3px; 
     white-space: nowrap 
    } 
    .xs_sprite i { 
     background-size: 140px; 
     background-color: #FFF; 
     width: 30px; 
     height: 30px; 
     bottom: -10%; 
     left: -10%; 
     position: absolute; 
     z-index: 9; 
     border-radius: 50%; 
     -webkit-border-radius: 50%; 
     -moz-border-radius: 50% 
    } 
    .xs_sprite.tab-pane>ul li { 
     border-width: 1px 0; 
     border-style: solid; 
     border-color: #CCC; 
     margin-top: -1px 
    } 
    .xs_sprite.tab-pane>ul li>.news_lhs a { 
     position: relative; 
     display: block 
    } 
    .n_sponsored { 
     font-size: 10px; 
     background-color: #fff100; 
     color: #000 
    } 
    .n_opinion { 
     background-color: #DA0000; 
     font-size: 14px; 
     color: #fff 
    } 
    .tab_ph { 
     padding: 0 12px 20px 
    } 
    .tab_ph.last { 
     padding-bottom: 0 
    } 
    .tab_ph_dtl { 
     background-color: #F7F7F7; 
     margin-top: 0; 
     display: table; 
     width: 100% 
    } 
    .tab_ph_dtl a { 
     display: table-row 
    } 
    .tab_ph_dtl .count { 
     width: 100px; 
     display: table-cell; 
     padding: 10px; 
     text-align: center 
    } 
    .tab_ph_dtl .count .lg_txt { 
     font-size: 30px; 
     line-height: 24px 
    } 
    .tab_ph_dtl .count span { 
     font-size: 18px; 
     color: #8C8C9A; 
     display: block 
    } 
    .tab_ph_dtl .p_name { 
     border-left: 1px solid #E4E4E4; 
     padding: 5px 10px; 
     display: table-cell; 
     vertical-align: middle; 
     color: #595959 
    } 
    .tab_ph_dtl .p_name, 
    .tab_ph_dtl .p_name h2, 
    .tab_ph_dtl .p_name strong { 
     font-weight: 400; 
     margin: 0; 
     font-size: 18px; 
     line-height: 20px 
    } 
    .tab_ph img { 
     border-bottom: none; 
     min-height: 200px 
    } 
    .tab_ph img, 
    .tab_ph_dtl { 
     border: 1px solid #e4e4e4 
    } 
    .tab_ph_dtl { 
     border-top: none 
    } 
    .video_icon { 
     width: 28px; 
     height: 36px; 
     background-position: 2.075% 70.399% 
    } 
    #tabs.stick { 
     position: fixed; 
     top: 50px; 
     background: #FFF; 
     padding: 5px 0 2px; 
     transition: all .2s ease; 
     -webkit-transition: all .2s ease; 
     -moz-transition: all .2s ease; 
     box-shadow: 0 1px 4px #CCC; 
     -webkit-box-shadow: 0 1px 4px #CCC; 
     -moz-box-shadow: 0 1px 4px #CCC; 
     z-index: 99; 
    } 
</style>`

HTML

<div class="tab_container margin_bottom20"> 
     <div id="latest" class="tab-pane xs_sprite active"> 
      <ul class="newslist" id="news-view"> 
       <div class="news_lhs"> 
        <a href="#"><img width="80" height="60" alt="" title="Google Makes It Easier to Add Places and Suggest Changes in Maps" src="http://cdn.ndtv.com/tech/google_maps_android_logo_small.jpg?downsize=160:120&output-quality=80&output-format=jpg" data-original="http://cdn.ndtv.com/tech/google_maps_android_logo_small.jpg?downsize=160:120&output-quality=80&output-format=jpg" class="" /> 
        </a> 
       </div> 
       <div class="news_rhs"><a href="#"><strong>Google Makes It Easier to Add Places and Suggest Changes in Maps</strong></a> 
       </div> 
       <div class="news_lhs"> 
        <a href="#"><img width="80" height="60" alt="" title="Samsung Galaxy Note7 Pre-Orders Begin in Dubai, Iris Scanner Shown in Video: Reports" src="http://cdn.ndtv.com/tech/images/Samsung_Galaxy_Note_Sammobile_small.jpg?downsize=160:120&output-quality=80&output-format=jpg" data-original="http://cdn.ndtv.com/tech/images/Samsung_Galaxy_Note_Sammobile_small.jpg?downsize=160:120&output-quality=80&output-format=jpg" class="" /> 
        </a> 
       </div> 
       <div class="news_rhs"><a href="#"><strong>Samsung Galaxy Note7 Pre-Orders Begin in Dubai, Iris Scanner Shown in Video: Reports</strong></a> 
       </div> 
       <div class="news_lhs"> 
        <a href="#"><img width="80" height="60" alt="" title="Karbonn Mobiles Sets Up Manufacturing Unit in Haryana" src="http://cdn.ndtv.com/tech/images/karbonn_titanium_s600_hd_thumb.jpg?downsize=160:120&output-quality=80&output-format=jpg" data-original="http://cdn.ndtv.com/tech/images/karbonn_titanium_s600_hd_thumb.jpg?downsize=160:120&output-quality=80&output-format=jpg" class="" /> 
        </a> 
       </div> 
       <div class="news_rhs"><a href="#"><strong>Karbonn Mobiles Sets Up Manufacturing Unit in Haryana</strong></a> 
       </div> 
       <div class="news_lhs"> 
        <a href="#"><img width="80" height="60" alt="" title="Indonesia Shrugs Off Pokemon Fatwa as Gaming Fever Takes Hold" src="http://cdn.ndtv.com/tech/images/gadgets/thumb/pokemons_wall_reuters_Small.jpg?downsize=160:120&output-quality=80&output-format=jpg" data-original="http://cdn.ndtv.com/tech/images/gadgets/thumb/pokemons_wall_reuters_Small.jpg?downsize=160:120&output-quality=80&output-format=jpg" class="" /> 
        </a> 
       </div> 
       <div class="news_rhs"><a href="#"><strong>Indonesia Shrugs Off Pokemon Fatwa as Gaming Fever Takes Hold</strong></a> 
       </div> 

       <div class="news_lhs"> 
        <a href="#"><img width="80" height="60" alt="" title="This Bengaluru-Based Company Wants to Help You Hire Full-Time Pokemon Hunters" src="http://cdn.ndtv.com/tech/images/gadgets/thumb/pokemon_go_99_afp_small.jpg?downsize=160:120&output-quality=80&output-format=jpg" data-original="http://cdn.ndtv.com/tech/images/gadgets/thumb/pokemon_go_99_afp_small.jpg?downsize=160:120&output-quality=80&output-format=jpg" class="" /> 
        </a> 
       </div> 
       <div class="news_rhs"><a href="#"><strong>This Bengaluru-Based Company Wants to Help You Hire Full-Time Pokemon Hunters</strong></a> 
       </div> 
     </div>

，我想使它像下面的截圖

http://i.imgur.com/BYnARKb.jpg

請找到的jsfiddle here

來源

2016-07-23 Yashveer Arya

+0

這裏的jsfiddle： - https://jsfiddle.net/k3byr3kr/1/ –

+0

發佈爲你找出答案，但需要進行清理的原代碼。你有無效的標記，使用非'li'元素作爲'ul'的直接子元素，並且CSS引用指向錯誤的元素。 – LGSon

回答

0

這裏是你清理（縮短）版本。

.tab-pane ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.tab-pane ul { 
 
    display: table; 
 
    border-collapse: collapse; 
 
} 
 
.tab-pane ul li { 
 
    display: table-row; 
 
} 
 
.tab-pane .news_lhs { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    position: relative; 
 
    width: 100px; 
 
    padding: 12px; 
 
    border: 1px solid lightgray; 
 
} 
 
.tab-pane .news_rhs { 
 
    display: table-cell; 
 
    width: auto; 
 
    font-size: 16px; 
 
    color: #595959; 
 
    padding: 10px; 
 
    vertical-align: top; 
 
    border: 1px solid lightgray; 
 
} 
 
.tab-pane .news_lhs img { 
 
    width: 80px; 
 
    display: block 
 
} 
 
.tab-pane .news_rhs a { 
 
    color: #333; 
 
    text-decoration: none 
 
} 
 
.tab-pane.xs_sprite .news_lhs a { 
 
    position: relative; 
 
    display: block 
 
}
<div class="tab_container margin_bottom20"> 
 
    <div id="latest" class="tab-pane xs_sprite active"> 
 
    <ul> 
 
     <li> 
 
     <div class="news_lhs"> 
 
      <a href="#"> 
 
      <img width="80" height="60" alt="" title="Google Makes It Easier to Add Places and Suggest Changes in Maps" src="http://cdn.ndtv.com/tech/google_maps_android_logo_small.jpg?downsize=160:120&output-quality=80&output-format=jpg" data-original="http://cdn.ndtv.com/tech/google_maps_android_logo_small.jpg?downsize=160:120&output-quality=80&output-format=jpg" 
 
      class="" /> 
 
      </a> 
 
     </div> 
 
     <div class="news_rhs"> 
 
      <a href="#"> 
 
      <strong>Google Makes It Easier to Add Places and Suggest Changes in Maps</strong> 
 
      </a> 
 
     </div> 
 
     </li> 
 
     <li> 
 
     <div class="news_lhs"> 
 
      <a href="#"> 
 
      <img width="80" height="60" alt="" title="Google Makes It Easier to Add Places and Suggest Changes in Maps" src="http://cdn.ndtv.com/tech/google_maps_android_logo_small.jpg?downsize=160:120&output-quality=80&output-format=jpg" data-original="http://cdn.ndtv.com/tech/google_maps_android_logo_small.jpg?downsize=160:120&output-quality=80&output-format=jpg" 
 
      class="" /> 
 
      </a> 
 
     </div> 
 
     <div class="news_rhs"> 
 
      <a href="#"> 
 
      <strong>Google Makes It Easier to Add Places and Suggest Changes in Maps</strong> 
 
      </a> 
 
     </div> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</div>

來源

2016-07-23 07:39:10 LGSon

+0

感謝CSS的簡短。但是，當我們添加1個圖像和標題時，它的工作正常，只要我們添加2個或更多圖像和標題，設計就會發生變化。你能檢查這裏的jsfiddle 2張圖片和標題： - https://jsfiddle.net/r18vwhm1/ –

+0

@YashveerArya我更新了我的答案，顯示它適用於2個或更多。請考慮接受我的回答 – LGSon

相關問題

 相關問題