Question

这是我的代码。我希望它不是硬编码尺寸，以便它可以在不同的浏览器resoultions上工作（不确定这是否是正确的术语）非常感谢您提前。

＆＃13;

#div1 {
  position: absolute;
  background-color: cyan;
  font-family: "Arial Black", Gadget, sans-serif;
  font-size: 24px;
  text-align: center;
  width: 300px;
  border: 25px solid red;
  padding: 25px;
  top: 30%;
  left: 50%;
  margin: -100px 0 0 -150px;
}
#div2 {
  background-color: cyan;
  font-family: "Arial Black", Gadget, sans-serif;
  font-size: 24px;
  text-align: center;
  width: 300px;
  border: 25px solid orange;
  padding: 25px;
}

＆＃13;

<div id="div1">Greeting Card Generator</div>
<div id="div2">Content Goes Here</div>

＆＃13;

Answer 1

您只需删除＃div1 的某些属性，＃div1的CSS将是，

#div1 {
  background-color: cyan;
  font-family: "Arial Black", Gadget, sans-serif;
  font-size: 24px;
  text-align: center;
  width: 300px;
  border: 25px solid red;
  padding: 25px;
}

Check this fiddle here

Answer 2

你有没有考虑过bootstrap？它让你的生活更轻松。

无论如何你去：

    #div1{

        background-color: cyan;
        font-family: "Arial Black", Gadget, sans-serif;
        font-size: 24px;
        text-align: center;
        width: 300px;
        border: 25px solid red;
        padding: 25px;



    }
    #div2{

        background-color: cyan;
        font-family: "Arial Black", Gadget, sans-serif;
        font-size: 24px;
        text-align: center;
        width: 300px;
        border: 25px solid orange;
        padding: 25px;
    }

如何让我的Div2直接低于我的Div1

2 个答案: