Question

我正在网站上建立一个“联系我们”表格并鼓励定位问题。这就是我想要得到的：

这是我在JS Fiddle中得到的。当我使用浮动时，它会超过页脚（相对位置）。

<div id="wrapper">
    <div id="one">
    <img  src="http://placehold.it/200x200"/>
    </div>
    <div id="two">
        <p class="test">blah blah</p>
        <form class="test">
            <input type="text"/>
            <input type="text"/>
            <input type="text"/>
        </form>
    </div>
</div>`

Answer 1

尝试将包装器div样式设置为

display: inline;

你的内心分裂

display: inline-block;

然后内部的每个将显示为原始内部的一个块，如果页面宽度变得太小，它将自动向下移动。

我还将每个文本字段放在一个单独的div中，以便它们垂直堆叠。

编辑：我上次搞砸了。您还需要绝对定位和垂直对齐，以显示您想要的方式，同时还要对宽度做出响应：

Here is the JSfiddle updated (again)

Answer 2

你需要清除浮子。我已经更新了JS小提琴http://jsfiddle.net/3Pghz/2592/

＆＃13;

#wrapper {
  overflow: hidden;
}
#one,
#two {
  float: left;
  width: 50%;
}
input {
  display: block;
}
img {
  width: 100%;
}

＆＃13;

<div id="wrapper">
  <div id="one">
    <img src="http://placehold.it/200x200" />
  </div>
  <div id="two">
    <p class="test">blah blah</p>
    <form class="test">
      <input type="text" />
      <input type="text" />
      <input type="text" />
    </form>
  </div>
</div>

＆＃13;

Answer 3

试试这个

<style>
#wrapper .text {
position:relative;
bottom:30px;
left:0px;
visibility:hidden;
}

#wrapper:hover .text {
visibility:visible;
}
#one
{ float:left;}

</style>
<div id="wrapper">
    <div id="one" >
    <img  src="http://placehold.it/200x200"/>
    </div>
    <div id="two">
        <p class="test">blah blah</p>
        <form class="test">
            <input type="text"/><br>
            <input type="text"/><br>
            <input type="text"/><br>
        </form>
    </div>
</div>

Answer 4

试试这个http://jsfiddle.net/3Pghz/2601/

---------- CSS --------

#wrapper #one {
    float: left;
    width: 220px
}

#wrapper #two {
    float: left;
    width: 300px;
}
#wrapper form.test input {
    display: table-cell;
    float: left;
    margin: 10px 0;
    width: 100%;
}

------------ HTML --------

<div id="wrapper"> 
    <div id="one"> <img src="http://placehold.it/200x200"> </div> 
    <div id="two"> 
        <p class="test">blah blah</p> 
        <form class="test"> 
            <input type="text"> 
            <input type="text"> 
            <input type="text"> 
        </form> 
    </div>
  <div style="clear:both;"></div>
</div>

显示内联校正

4 个答案: