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
jsfiddleである： - オリジナルのコードをクリーンアップする必要があるもののhttps://jsfiddle.net/k3byr3kr/1/ –
は、あなたのための答えを投稿。無効なマークアップがあります。非 'li'要素を' ul'の直接の子として使用し、CSS参照は間違った要素を対象としています。 – LGSon