如何正確地設置裏面的div的寬度

我想給我的div裏面的寬度值和div的邊框有我想要的寬度，但我在該div中的文本是忽略該寬度和它似乎是繼承容器寬度。不過，這只是文字。如何正確地設置裏面的div的寬度

我通常不使用鋰標籤，所以我不知道問題是什麼。

這基本上是我的工作的HTML：

<div id="container"> 
    <div class="inner"> 
    <ul> 
     <li> 
     <a class="img" href="..."></a>             
     <div class="desc"> 
      ... 
     </div> 
     </li>       
    </ul>      
    </div> 
</div>

這是CSS：

#container { 
 
    margin:0 auto; 
 
    width: 900px; 
 
    height: 500px; 
 
    box-sizing:border-box; 
 
    position:relative; 
 
    right: 160px; 
 
    -webkit-user-select: none; 
 
    user-select:none; 
 
} 
 

 
#container div.inner { 
 
    position:relative; 
 
    overflow:hidden; 
 
    padding:0; 
 
    margin:0; 
 
} 
 
    
 
#container div.inner ul {  
 
    white-space:nowrap; 
 
    position:relative; 
 
    left:0; top:0; 
 
    list-style:none; 
 
    font-size:0; 
 
    padding:0; 
 
    margin:0; 
 
    float:left!important; 
 
    width:auto!important; 
 
    height:auto!important; 
 
} 
 

 
#container ul li { 
 
    display:inline-block; 
 
    margin-top:20px; 
 
    margin-bottom:200px; 
 
    margin-left:-45px; margin-right:-30px; 
 
    -webkit-transform:scale(0.6); 
 
    transform:scale(0.6); 
 
    -webkit-transition:-webkit-transform 0.5s; 
 
    transition:transform 0.5s; 
 
    box-sizing:content-box; 
 
    text-align:center; 
 
    vertical-align:middle; 
 
    padding:0; 
 
    position:relative; 
 
    list-style:none; 
 
    backface-visibility:hidden; 
 
    
 
} 
 

 
#container ul li.active { 
 
    -webkit-transform:scale(1); 
 
    transform:scale(1); 
 
    background-color:transparent; 
 
} 
 
     
 
     #container ul li.active .desc { 
 
     display: block; 
 
} 
 

 
     .desc { 
 
    display: none; 
 
    width: 310px!important; 
 
    height: 200px; 
 
    border: 1px solid #fff; 
 
    position: relative; 
 
    right: 350px; 
 
    top: 275px; 
 
    color: #fff; 
 
    font-family: Arial; 
 
    font-size: 11px; 
 
    padding: 15px; 
 
    text-align: justify; 
 
     } 
 

 

 
#container .img { 
 
    width: 200px; 
 
    height: 320px; 
 
    background-size:contain; 
 
    background-repeat:no-repeat; 
 
    background-position:center center; 
 
    display:block; 
 
    position:absolute; 
 
    font-size:0; 
 
    cursor:inherit; 
 
    transition:all linear 0.4s; 
 
}

來源

2017-07-09 Oxygen

什麼是你已經寫的CSS代碼？所以我們可以幫助。 –

爲你的問題添加一個jsfiddle或代碼片段。 –

你能編輯小提琴，以便它演示問題嗎？ –

似乎有很多的CSS這裏是相互矛盾的。你確定你需要在很多地方使用'！important'嗎？

很難說出發生了什麼，但我的感覺是，使用position：absolute和float會破壞事情。

此外，您的div裏面的「（desc）」被設置爲在某個點顯示：block。嘗試將其更改爲內聯或內嵌塊，具體取決於您需要它的樣子。

#container ul li.active .desc { 
     display: block; 
}

在這之後，你試圖設置一個寬度，當它是顯示器，然後：無...

.desc { 
    display: none; 
    width: 310px!important; 
    ...

這可能是顯示不出來，因爲如果顯示：塊開始優先級，因爲你對你的選擇器更具體。嘗試做同樣的.desc部分：

#container ul li .desc { 
    display: none; 
    width: 310px!important; 
    ...

如果你可以提供一個工作的jsfiddle或代碼段，這樣我們就可以看到你正在努力實現，這將有助於什麼。

我也想爲你重寫這個，這樣你就可以看到在沒有所有衝突的情況下完成你的佈局的方法。

來源

2017-07-09 14:42:12 sigil

在您的.desc {}是從底部第二個padding: 15px; 嘗試刪除那一個。

來源

2017-07-09 14:43:47

如何正確地設置裏面的div的寬度

回答

相關問題