html - 将 Div 直接放在文本框下方

Question

我在使用 CSS 将 Div 直接放置在文本框下方时遇到了一些问题。我需要直接在文本框下方使用 CSS/CSS3 Transitions 的 Div。我已经尝试了我所知道的，但所有的尝试似乎都失败了。如果有人能帮助我，我会很高兴。

图 1 是我尝试放置 Div 的方式，图 2 是现在的样子:http://i49.tinypic.com/2h31zjp.jpg

CSS:

input {
  top:18px; left:20px;
  width:1230px; padding:4px;
  border:1px dashed grey;
  font:16px arial;
  font-weight:bold;
  color:#d8d8d8;
}

input:focus+p {
  height:200px;
}

p {
  overflow:hidden;
  height:0;
  width:1230px;
  background-color: transparent;
  border:1px dashed gray;
  transition:height.5s;
  -moz-transition:height 0.5s;
  -o-transition:height 0.5s;
  -webkit-transition:height 0.5s;
}

Answer 1

您必须放置 <input>首先，然后是 <div> .可以使用换行符向下推 div <br> .由于输入本身有默认边框，由浏览器完成，因此有可能在多个浏览器中更改外观。所以你必须为你的 <input> 定义一个实线边框，说像一个 1px。您还可以定义 margin: 0和 padding: 0在你的html或 body或您的父容器。

Here 是您所要求的现场演示。

希望这对您有所帮助。