图像框和文本链接的顺序正确

时间:2016-07-23 05:55:36

标签: css css3 media-queries

我已经尝试了很多正确的顺序但无法做到。

以下是我在widget中直接使用的内容

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

1 个答案:

答案 0 :(得分: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>