複数の列にまたがるスタイル入力とテキストエリア（divなし）

Question

以下のマークアップをどのようにスタイル設定して、説明されているようにレイアウトすることができますか。これはどのように

input input textarea 
input input 
input input 

Answer 1

を使用すると、あなたが

0123を達成している、これを試してみてくださいdivタグのない

form{ 
 
    width:100%; 
 
    display:table; 
 
} 
 
input{ 
 
    width:30%; 
 
    display:inline-block; 
 
} 
 
textarea{ 
 
    width:33.33%; 
 
    float:right; 
 
    display:inline-block; 
 
}

<form> 
 
    <textarea></textarea> 
 
    <input name="one"> 
 
    <input name="two"> 
 
    <input name="three"> 
 
    <input name="four"> 
 
    <input name="five"> 
 
    <input name="six">  
 
</form>

Answer 2

：

<form> 
    <input name="one"> 
    <input name="two"> 
    <input name="three"> 
    <input name="four"> 
    <input name="five"> 
    <input name="six"> 
    <textarea></textarea> 
</form> 

は、以下のレイアウトを持っていますか？あなたが Bootstrapを使用するcnの場合

form{ 
    position: relative; 
} 
input{ 
    display: inline-block; 
    width: 35%; 
} 
textarea{ 
    position: absolute; 
    right: 0; 
    top: 0; 
} 

/*or*/ 
form{ 
    -webkit-column-count: 4; /* Chrome, Safari, Opera */ 
    -moz-column-count: 4; /* Firefox */ 
    column-count: 4; 
} 

Answer 3

それは

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<form> 
 
    <div class="row"> 
 
    <div class="col-md-6"> 
 
    <input name="one"> 
 
    <input name="two"> 
 
    <input name="three"> 
 
    <input name="four"> 
 
    <input name="five"> 
 
    <input name="six"> 
 
     </div> 
 
     <div class="col-md-6"> 
 
    <textarea></textarea> 
 
    </div> 
 
    </div> 
 
</form>

Answer 4

私はdivを使用しますが、あなたは

<form> 
 
     <table> 
 
     <tr> 
 
      <td><input name="one"></td> 
 
      <td><input name="four"></td> 
 
      <td rowspan="3"><textarea></textarea></td> 
 
     </tr> 
 
     <tr> 
 
      <td><input name="two"></td> 
 
      <td><input name="five"></td> 
 
     </tr> 
 
     <tr> 
 
      <td><input name="three"></td> 
 
      <td><input name="six"></td> 
 
     </tr>  
 
     </table> 
 
    </form>

を行うことができ、より簡単になります

Answer 5

divを使用したくない場合は、テーブルを使用してください。

td{ 
 
    display:block; 
 
}

<form> 
 
<table> 
 
<th> 
 
    <td><input name="one"></td> 
 
    <td><input name="two"></td> 
 
    <td><input name="three"></td> 
 
</th> 
 

 
<th> 
 
    <td><input name="four"></td> 
 
    <td><input name="five"></td> 
 
    <td><input name="six"></td> 
 
</th> 
 

 
<th> 
 
    <td><textarea></textarea></td> 
 
</th> 
 
</table> 
 
    
 
</form>

Answer 6

<!--Below is the inline css code with html... You can also separate it if nedded-->  
    <form style="float:left;width:100%"> 
     <div style="float:left;width:30%;height:auto"> 
      <input name="one" style="width:100%"> 
      <input name="two" style="width:100%"> 
      <input name="three" style="width:100%"> 
     </div> 
     <div style="float:left;width:30%;height:auto"> 
      <input name="four" style="width:100%"> 
      <input name="five" style="width:100%"> 
      <input name="six" style="width:100%"> 
     </div> 
     <div style="float:left;width:30%;height:auto"> 
      <textarea style="width:100%"></textarea> 
     </div> 
    </form> 

Answer 7

あなたがtextarea as first elementを使用する場合は、テーブル

textarea 
 
{ 
 
    height:100px 
 
    
 
    }

<form> 
 
    <table> 
 
    <tr> 
 
    <td><input name="one"></td> 
 
    <td><input name="two"></td> 
 
    <td rowspan=3><textarea></textarea></td> 
 
    </tr> 
 
    <tr> 
 
    <td> <input name="three"></td> 
 
    <td><input name="four"></td> 
 
    </tr> 
 
    
 
    <tr> 
 
     
 
    <td><input name="five"></td> 
 
    <td> <input name="six"></td> 
 
     </tr> 
 
    
 

 
    
 
    </table> 
 
</form>