刪除被圖像重疊的多餘區域

我在跟進this guide在我的網站上創建標籤菜單時遇到了問題。刪除被圖像重疊的多餘區域

內容框有點太長，並被圖像重疊。有人會請告訴我如何削減多餘的區域？

下面是說明問題的jsfiddle example。

HTML：

<div class='product'> 
    <div class="product_image"> 
     <img src="http://www.gamersgate.com/img/boximgs/big/DDB-TTCP.jpg" alt="fggf" 
     /> 
    </div> 
    <div class="container"> 
     <ul class="tabs"> 
      <li class="tab-link current" data-tab="tab-1">Tab One</li> 
      <li class="tab-link" data-tab="tab-2">Tab Two</li> 
      <li class="tab-link" data-tab="tab-3">Tab Three</li> 
      <li class="tab-link" data-tab="tab-4">Tab Four</li> 
     </ul> 
     <div id="tab-1" class="tab-content current">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
      consequat.</div> 
     <div id="tab-2" class="tab-content">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum 
      dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div> 
     <div 
     id="tab-3" class="tab-content">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi 
      ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit 
      in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</div> 
    <div 
    id="tab-4" class="tab-content">Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
     enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut 
     aliquip ex ea commodo consequat.</div> 
</div> 
<!-- container -->

CSS：

body{ 
    margin-top: 100px; 
    font-family: 'Trebuchet MS', serif; 
    line-height: 1.6 
    } 
    .container{ 
    width: 800px; 
    margin: 0 auto; 
    } 

    ul.tabs{ 
    margin: 0px; 
    padding: 0px; 
    list-style: none; 
    } 

    ul.tabs li{ 
    background: none; 
    color: #222; 
    display: inline-block; 
    padding: 10px 15px; 
    cursor: pointer; 
    } 

    ul.tabs li.current{ 
    background: #ededed; 
    color: #222; 
    } 

    .tab-content{ 
    display: none; 
    background: #ededed; 
    padding: 15px; 
    } 

    .tab-content.current{ 
    display: inherit; 
    } 

    .product { 
    font-size: small; 
    } 

    .product_image { 
    float: left; 
    width: 200px; 
    padding: 20px; 
    margin: 0 20px 20px 0; 
    }

來源

2013-08-31 RedGiant

+1對於小提琴。它使得每個人都更容易:) –

@TravisJ，謝謝。但出於未知原因，我無法讓標籤在小提琴上運行。 – RedGiant

那是因爲你忘記了包含jQuery（oops！）。這是一個更新的：http://jsfiddle.net/fhWjz/ –

如果我理解正確，檢查一個在這裏fiddle

I made changes in css only

來源

2013-08-31 17:52:23 Dmitry

修改一下CSS的，這裏有一個Fiddle

.tab-content { 
    display: none; 
    float: right; 
    width: 584px; 
    margin: 0; 
    background: #ededed; 
    padding: 15px; 
}

來源

2013-09-01 18:09:05 mdesdev

非常感謝！我使用「向左浮動」，因爲它使標籤更接近圖片。 – RedGiant

刪除被圖像重疊的多餘區域

回答

相關問題