Дисплей коррекции рядный

Question

Im здание, «Контакты» форму на сайте и поощрять проблемы с positioning.This что Im пытается получить:

Это то, что я получаю в JS Fiddle. Когда я использую float, он идет выше нижнего колонтитула (который позиционируется относительно).

<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; 

Try Тогда внутренние, будут каждый отображаться как блок внутри оригинала, который будет автоматически переместитесь вниз, если ширина страницы станет слишком малой.

Я также помещаю каждое текстовое поле в отдельный div, чтобы они складывались вертикально.

EDIT: Я действительно испортил это в прошлый раз. Кроме того, необходимо абсолютное позиционирование и вертикальной Align для того, чтобы показать, как вы хотите, но и быть отзывчивым к ширине:

Here is the JSfiddle updated (again)

Answer 2

Вам нужно очистить поплавки. Я обновил скрипку JS http://jsfiddle.net/3Pghz/2592/

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

<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 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>