無法刪除右邊距，並且隨着div寬度縮小而增長

這似乎是一個非常標準的情況，但HTML/CSS表現異常。我正在爲遊戲構建個人資料頁面，並且也在考慮移動響應。我似乎無法讓右邊緣消失。縱向模式（使用Chrome移動模擬器擴展程序）不是問題，但在橫向模式下，div +邊距太寬，並出現滾動條。無法刪除右邊距，並且隨着div寬度縮小而增長

HTML：

<div class="userProfile" style="display:none"> 
    <div class="profileTop"> 
     <div class="profilePicture"> 
      <img src="somepicture.png"></img> 
     </div> 
     <div class="profileName"></div> 
    </div> 
</div>

CSS：

.profileTop { 
    position: relative; 
    top: 10%; 
    left: 15%; 
    width: 70%; 
    height: 12%; 
    margin: 0; 
} 

.profilePicture { 
    display: inline-block; 
    width: 12vw; 
} 

.profilePicture img { 
    width: 100%; 
    height: auto; 
    vertical-align: top; 
} 

.profileName { 
    display: inline-block; 
    position: relative; 
    font-family:Stencil; 
    font-size: 1.3em ; 
    font-weight: lighter; 
    color: white; 
    left: 20%; 
    top: 35%; 
}

有什麼奇怪的是，如果我減少「profileTop」級的寬度，右邊距的增長，使整個事情是一樣的寬度。任何幫助？

編輯：我可以通過減少「USERPROFILE」的寬度得到了可行的解決方案，但它仍然困擾着我，因爲原本打算這是不行的。

EDITx2：頁邊距也存在於「userProfile」div中。我猜想「profileTop」div是以某種方式跟隨其父，但即使我將margin-right：0屬性添加到兩個div，邊距仍然存在。「userProfile」的父項是正文。

來源

2016-07-23 SuperCodeBrah

側面說明，圖像自動關閉，所以''應該只是''或''能 – j08691

添加一個codepen演示？ –

HTML代碼出現錯誤，您不需要圖像的結束標記。

其次，您可以使用媒體查詢來實現這一點。媒體查詢甚至可以選擇橫向格式，使用起來非常簡單。祝你好運

@media (min-width: 700px) and (orientation: landscape) { ... }

P.S.第二次使用codepen或jsFiddle，它會更簡單地幫助你。

編輯：添加媒體查詢例子

來源

2016-07-23 18:52:55

我可能並不清楚，但我已經在使用媒體查詢。無論我是在風景還是肖像，邊緣都在那裏。 – SuperCodeBrah

你可以添加一切你必須jsFiddle？那樣會更容易 –

哦，我看到Faraz Sh。剛剛回答你的問題。祝你好運:) –

你需要使用一個更具體的選擇覆蓋初始分配的CSS屬性。

@media (max-width: 768px) { 
    div.userProfile div.profileTop { 
    margin-right:0; 
    } 
}

來源

2016-07-23 19:14:42

沒有爲我工作。不是「profileTop」比最初分配的內容更具體嗎？ – SuperCodeBrah

div.profileTop比profileTop更具體。你能提供jsfiddle嗎？ –

我明白，div.profileTop更具體，但.profileTop本身應該是足夠的，因爲在通過.profileTop分配css之前div上的唯一屬性將是從父類繼承的屬性，據我瞭解，它將被任何我給了.profileTop屬性。這裏是jfiddle：https://jsfiddle.net/s1hewL2b/ – SuperCodeBrah

無法刪除右邊距，並且隨着div寬度縮小而增長

回答

相關問題