HTML身體邊際0搞定div定位

我對這裏發生的事情感到困惑。我把我的身體邊距設置爲0在我的CSS，然後所有的div元素像我想要的那樣在整個屏幕上延伸，但我希望這隻適用於一個。從以前的問題：HTML Image going across entire screen HTML身體邊際0搞定div定位

答案說使用position：absolute然後改變div元素的位置。我曾經有位置：相對於這些div元素，當我將它改爲絕對時，它將所有div元素合併到一個位置。我試着用底部移動它們：然後是任何像素，但仍然沒有移動它。這會是移動它的方式嗎？我會怎麼做？在W3學校：http://www.w3schools.com/css/css_positioning.asp

它告訴我很多關於定位div元素的信息，但是當我嘗試使用它時，它並不適用於我試過的一個div元素，而是將它重疊。

我會如何移動這些div元素？

代號CSS

#middle-4{ 
    position:absolute; 
    left:0; 
    right:8; 
    bottom:0; 
    top:-800px;}

代碼HTML

<div id="middle-4" style="background-image: url(images/Home/rock.png); height: 540px; width: 1348px; border: 1px solid black;"></div>

這樣做是爲了對你可以看到多達4個div元素。

來源

2015-04-12 JarFile

我們不能告訴你我們看不到HTML和CSS有什麼問題。請發佈有問題代碼的示例。 –

添加代碼，告訴我你是否需要其他div元素 – JarFile

如果我正確理解您的問題，您希望所有元素都符合默認body頁邊除一個元素（或使用類的多個元素）外。

我會做這樣的...

給body一定的餘量，以確保它是跨瀏覽器一致的。
使用負水平邊緣拉你元件的body

body { 
 
    margin: 8px; 
 
    background: lightGreen; 
 
} 
 
div { 
 
    background: lightBlue; 
 
    padding: 30px; 
 
    border-bottom: 1px solid blue; 
 
} 
 
.fullwidth { 
 
    margin-left: -8px; 
 
    margin-right: -8px; 
 
}

<div>I'm constrained by body</div> 
 
<div class="fullwidth">I'm full width</div> 
 
<div>I'm constrained by body</div>

來源

2015-04-12 19:07:12 Turnip

是的，這對我有用，做我想做的。謝謝，但有一個問題。在我的頁腳div元素顯然觸及頁面的底部，左邊和右邊的邊距工作，但我將如何做底部邊緣？我嘗試了margin-bottom：-8px;但沒有工作。除此之外，其他一切都有效。我也嘗試過簡單的邊距：-8px;在頁腳上，仍然與左右邊距相同。 – JarFile

一個簡單的解決方法是將'margin-bottom：0;'添加到'body'中，或者將它與上面的代碼結合起來，您將會寫入'body {margin：8px 8px 0 8px}' – Turnip

再次感謝您，問題現在解決了。 – JarFile

設定餘量的限制外體上只保證跨瀏覽器的一致性，由uʍopǝpısdn

提到如果你有4個div，每個div包含一個圖像，你應該堅持位置：相對 - 這將垂直排列divs /圖像彼此頂部。如果你想要所有的圖像保持其原始大小，你可以保留它們的寬度和高度屬性，如示例中的「middle-4」所示：height：540px; height：540px;寬度：1348px;

但是 - 做你想做一個DIV /圖像在整個車身/屏幕的寬度加寬，你將有個應用大小 - 這可以通過兩種方式來完成：

CSS3 - 你有「蓋」或「遏制」的選項，它可以應用到div的爲您選擇做現在 - 例如：

div { 
    background: url(images/Home/rock.png); 
    background-repeat: no-repeat; 
    background-position: center; 
    background-size: cover; 
}

CSS2 - 你可以申請一類圖像本身，而忘記了周圍的div - 例如：

<img src="images/Home/rock.png" class="img_width" /> 

.img_width { 
    width: 100%; 
    height: auto; 
}

來源

2015-04-12 19:40:41 jan199674

我已經有div的位置：親戚，但是謝謝你提供的信息。 – JarFile

HTML身體邊際0搞定div定位

回答

相關問題