我有一个网站，屏幕上有一张大图片。在它的图像中有几个 DIV(文本、表单、图像)(见图 2)。无论窗口大小如何，大图像容器始终显示图像的中心，因此当您缩小窗口时，中心仍然可见。
现在的问题是，当我缩小窗口大小时，DIV 正在折叠(见图 3)。
图片 2 描绘了它的预期外观!
#div1 {
width:25%;
left: 32%;
top:7.5%;
position: relative;
float:left;
}
#div2 {
position:relative;
left:37.5%;
clear:both;
width:14%;
height:20%;
}
#div2 h2 {
width:10%;
left:15%;
margin-top:11%;
position: relative;
float: left;
}
#div3 {
left: 64.4%;
top:-2.5%;
width:111px;
position: relative;
}
#div4{
left: 93%;
top:-18.0%;
width:111px;
position: relative;
}
和 HTML:
<body>
<div id="wrapper"\>
<div id="div1">
<h1>Seite nicht gefunden!</h1>
</div>
<h2>Bug melden</h2>
<div id="div2">
<form>
<label>Titel</label>
<input type="text" id="form_title" name="title" placeholder="Ich will einen Bug melden!" required>
<label>URL</label>
<input type="url" id="form_url" name="URL" placeholder="###" >
<label>Beschreibung</label>
<textarea type="text" id="form_whathappened" name="happened" placeholder="Was ist passiert?" required></textarea>
<input type="submit" value="Absenden" />
</form>
</div>
<div id="div3">
<a href="http://www.###.de" target="new"><img src="logo.png" alt="Logo" /></a>
</div>
<div id="div4">
<a href="http://www.###.de" target="new"><p>Jetzt<br/ >Tester<br />werden!<br /></p></a>
</div>
</div>
</body>
你能帮我看看我做错了什么吗？非常感谢您!
克里斯托夫
最佳答案
这可能远非完美，但值得一试。
html代码:
<head>
<meta charset="utf-8">
<title>404</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="wrapper">
<div id="error">
<h1>Seite nicht gefunden!</h1>
</div>
<form id="form">
<h2>Bug melden</h2>
<label>Titel</label>
<input type="text" id="form_title" name="title" placeholder="Ich will einen Bug melden!" required>
<label>URL</label>
<input type="url" id="form_url" name="URL" placeholder="http://www.###/???" >
<label>Beschreibung</label>
<textarea type="text" id="form_whathappened" name="happened" placeholder="Was ist passiert?" required></textarea>
<input type="submit" value="Absenden" />
</form>
... //other code goes here</div>
这是CSS代码的编辑部分:
#wrapper { width: 640px; height: auto; margin: 0 auto; }
#error { font-size: 120%; margin: 65px 0 0 60px; float:left; }
#error h1 { font-size: 150%; text-align:center; }
#form { margin: 15px 86px; width:260px; height: 40%; float: left; background: green; }
在此处检查工作示例:example
希望这对您有所帮助。
关于css - DIV 正在折叠，位置设置为 "relative"，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13405891/