HTML как разместить форму в 2 делителя / столбца?

Question

У меня есть 1 form, и я хотел бы поместить его в 2 div с, чтобы следующее:

<div style="float:left; position:relative; margin-right:40px">
<form id="testForm2">
</form>
</div>

<div position:relative">
<form id="testForm2">
</form>
</div>

превратилось бы в нечто подобное:

<div style="float:left; position:relative; margin-right:40px">
<form id="testForm2">
</div>

<div position:relative">
</form>
</div>

См. скрипку .Есть идеи?

Спасибо!

Answer 1

То, что вы хотите, это поместить форму вокруг обоих элементов div следующим образом:

<form id="testForm2">
  <div style="float:left; position:relative; margin-right:40px">
  </div>

  <div style="position:relative">
  </div>
</form>

Вот обновленная версия вашего jsFiddle.

Edit
Кроме того, стиль вашего второго div неверен.Это исправлено в моем примере.

Answer 2

Разметка в вашем файле jsFiddle требует некоторой очистки.Вот что я хотел бы сделать, пытаясь минимизировать ваш код:

<div class="post_edit_modeling">
    <div class="tab_trash">
        <div id="prof_picture">
            <form id="testForm2">
                <fieldset id="left">
                    <legend>Sex:</legend>
                    <div>
                        <label>
                            <input type="radio" name="sex" id="genderMale" value="male" />
                            Male
                        </label>
                    </div>
                    <div>
                        <label>
                            <input type="radio" name="sex" id="genderFemale" value="female" />
                            Female
                        </label>
                    </div>
                    <div>
                        <label>Weight</label>
                        <input id="weightpounds" type="text" name="weightpounds"/>
                    </div>
                    <div>
                        <label>Bust</label>
                        <input id="bust" type="text" name="bust"/>
                    </div>
                </fieldset>
                <fieldset id="right">
                    <div>
                        <label>Cup</label>
                        <input id="cup" type="text" name="cup"/>
                    </div>
                    <div>
                        <label>Waist</label>
                        <input id="waist" type="text" name="waist"/>
                    </div>
                    <div>
                        <label>Hips</label>
                        <input id="hips" type="text" name="hips"/>
                    </div>
                    <div>
                        <label>Hair Color</label>
                        <select name="haircolor">
                            <option value="1">White</option>
                            <option value="2">Black</option>
                            <option value="3">Yellow</option>
                            <option value="4">Blue</option>
                        </select>
                    </div>
                    <div>
                        <label>Dress Size</label>
                        <input id="dress" type="text" name="dress"/>
                    </div>
                </fieldset>
                <fieldset>
                    <div>
                        <input type="button" name="btnUpdate" id="btnUpdate"  value="Update" />
                    </div>
                </fieldset>
            </form>
        </div>
    </div>
</div>

CSS:

form div {float: left; margin-bottom: 15px;}
fieldset { float: left; width: 200px; border: 0; padding: 0; margin: 0;}
#left { }
#right { margin-right: 0; }
label {float: left;}
input {clear: both;; float: left}

Я обновил ваш файл jsFiddle. Здесь .

Answer 3

Просто переместите теги <div> в <form> ...

<form id="testForm2">
    <div style="float:left; position:relative; margin-right:40px">
        ... left side ...
    </div> 
    <div position:relative">
        ... right side ...
    </div>
</form>

Answer 4

Разве вы не можете просто поместить 2 DIV в теги FORM? Что-то вроде:

<form>
<div id="one">
    ...
</div>
<div id="two">

</div>
</form>

edit: Кажется, я немного опоздал :)

Answer 5

Как сказали Drackir и joe_coolish, вам не нужно вкладывать теги форм таким образом.

Обычно я всегда открываю весь блок контента с помощью тега формы, полностью изолированного от другого контента. Там нет абсолютно никакого вреда, делая вещи таким образом. Все, что включает <h1> и целые макеты , может быть вложено в форму, если вы знаете, что каждый вход в нее будет принадлежать этой форме.

<form>
<!-- tons of content here including layout -->
</form>

Answer 6

Разве вы не можете просто заставить двух дивов жить внутри формы?Например:

<form id="testForm2">
    <div style="float:left; position:relative; margin-right:40px">
      Form Content Here
    </div>

    <div position:relative">
      Form Content Here
    </div>
</form>

Если форма влияет на макет вашей страницы, убедитесь, что вы установили стиль формы на display:inline;!

Answer 7

а как же

<form id="testForm2">
    <div style="float:left; position:relative; margin-right:40px">        
    </div>

    <div position:relative">
    </div>
</form>