Question

我的网站有一个覆盖屏幕的大图像。在其图像中有几个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>

你能帮我解决一下我做错了什么吗？非常感谢你提前！

了Christoph

Full window size

That's how it should look like after resizing the window

That's what it looks like instead

Answer 1

这可能远非完美，但值得尝试。

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

希望这有助于开始。

DIV正在崩溃，位置设置为“相对”

1 个答案: