百分比寬度不適用於3列

我嘗試使圖像具有3列響應菜單，但是當我將#teams .teams寬度更改爲百分比時，div消失。請提供任何解決方案！百分比寬度不適用於3列

有我的代碼

#teams .team_select { 
 
    display: table; 
 
    margin: 0 auto 20px auto; 
 
} 
 
#teams #choose { 
 
    display: inline-block; 
 
    /*width: 32.4%;*/ 
 
    width: calc(98%/3); 
 
} 
 
#teams #choose:nth-child(1) { 
 
    margin-right: 1%; 
 
} 
 
#teams #choose:nth-child(2) { 
 
    margin-right: 1%; 
 
} 
 
#teams .teams { 
 
    display: table-cell; 
 
    background-size: cover; 
 
    background-position: center; 
 
    /*width: 360px; 
 
     height: 370px;*/ 
 
    width: calc(98%/3); 
 
    height: auto; 
 
    transition: background-image 1s ease-in-out; 
 
    -webkit-transition: background-image 1s ease-in-out; 
 
    -moz-transition: background-image 1s ease-in-out; 
 
    -o-transition: background-image 1s ease-in-out; 
 
    -pre-transition: background-image 1s ease-in-out; 
 
} 
 
#teams .back { 
 
    background-image: url("https://f4.bcbits.com/img/a3503173982_16.jpg"); 
 
}

<div class="team_select"> 
 
    <div id="choose"> 
 
    <a href=""> 
 
     <div class="teams back"></div> 
 
    </a> 
 
    </div> 
 
    <div id="choose"> 
 
    <a href=""> 
 
     <div class="teams back"></div> 
 
    </a> 
 
    </div> 
 
    <div id="choose"> 
 
    <a href=""> 
 
     <div class="teams back"></div> 
 
    </a> 
 
    </div> 
 
</div>

我做了一個JSFiddle太

來源

2016-08-02 Daniels Jirgensons

的可能的複製[與恰好33％的寬度3內聯塊的div不是父嵌合] （http://stackoverflow.com/questions/15653017/3-inline-block-divs-with-exactly-33-width-not-fitting-i n-parent） – Xufox

你不能重複ID ...嘗試使用類/ –

我找到這個解決方案，並做了短代碼，但它的作品不錯。唯一的問題是，與min-height他留下空格後divs，我不知道如何刪除。

HTML

<div id="teams"> 
    <ul> 
     <a href=""><li class="back"></li></a> 
     <a href=""><li class="back"></li></a> 
     <a href=""><li class="back"></li></a> 
    </ul> 
</div>

CSS

#teams{ 
     width:100%; 
    } 

    #teams ul{ 
     overflow:auto; 
    } 

    #teams li{ 
     list-style:none; 
     display:inline-block; 
     width: 31%; 
     min-height: 700px; 
     height: auto; 
     background-size: 100%; 
     background-repeat: no-repeat; 
    } 

    li.back{background-image:url("https://f4.bcbits.com/img/a3503173982_16.jpg");} 
    li.back:hover{background-image:url("https://designschool.canva.com/wp-content/uploads/sites/2/2015/10/How-To-Use-Blurred-Images-In-Your-Designs-To-Great-Effect_Thumbnail_01.png");}

有新JSFiddle

來源

2016-08-02 19:08:37

'background-size：100％;'需要改變爲'background-size：cover;' –

百分比寬度不適用於3列

回答

相關問題