Question

我对这里发生的事感到困惑。我把我的身体边缘设置为0在我的css然后所有div元素在我想要的屏幕上伸展，但我希望这只适用于一个。来自上一个问题：HTML Image going across entire screen

答案说要使用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元素。

Answer 1

如果我正确理解你的问题，你希望所有元素都符合默认的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>

Answer 2

仅在主体上设置边距可确保uʍopǝpısdn

中提到的跨浏览器一致性

如果你有4个包含每个图像的div，你应该坚持位置：相对 - 这会将div /图像垂直排列在彼此之上。

您的问题可能与图像尺寸有关 - 如果您希望所有图像保持原始尺寸，您可以保留其宽度和高度属性，如示例“middle-4”中所指定：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; 
}

HTML正文边缘0搞乱div定位

2 个答案: