Question

这是html结构。

       <form id="coment"....>
  <div id="name"><input....>....</div>
   <div id="email"><input....>....</div>
  <div id="website"><input....>....</div>
  <div id="textbox"><textarea...>....</div>
<div id="submit"><input...>....</div>
 </form>

我希望textarea框位于名称，电子邮件，网站文本的右侧。如图所示。 http://run.xxmn.com/1.png

当我将此样式添加到“文本框”时，

    width:400px;
   position: relative;
   top: -70px;
    left: 3px;

在Chrome和IE 8中，textarea的div id unorder，它位于上面的名称，电子邮件，网站的部分。

在Firefox中，IE6,7.it显示确定。

我怎样才能在Chrome和IE 8中做到这一点？

Answer 1

正确的解决方法是创建一个表示表单列的新div，并将三个输入放在左列中，将文本框放在右列中。

例如：

<div class="left">
    <div id="name"><input....>....</div>
    <div id="email"><input....>....</div>
    <div id="website"><input....>....</div>
</div>
<div class="right">
    <div id="textbox"><textarea...>....</div>
</div>

然后：

.left {
    float: left;
    width: 50%;
}

.right {
    float: right;
    width: 50%;
}

#name, #email, #website, #textbox {
    width: 100%;
}

#testbox {
    height: 300px; /* However tall it needs to be */
}

为什么我的textarea框在不同浏览器中的位置不同

1 个答案: