CSS對齊2 HTML表單

我試過很多方法，但不能達到我所需要的任何方式。CSS對齊2 HTML表單

所以我有這個現在：

我要實現的是這樣的：

有DIV #Container持有2種形式：#Form1和#Form2。 #Form1是定製的個人資料圖片和#Form2是用戶的個人信息，如姓名，電子郵件，網站等

我想實現這個資料圖片會在左邊對齊，在右側應該去文本字段爲先要左對齊姓，名，電子郵件地址和到達Form1的底部時，窗口2應該開始如圖所示的形象。

例如，如果#Form1我設置爲30％，Form2至60％的寬度，它看起來像這樣：

任何想法我怎麼能實現它，我試圖讓相對#Form1， #Form2絕對的，但不正確的結果了。

這是樣品的CSS現在：

#Form1 { 
    width: 30%; 
    float: left; 
    margin-top: 15px; 
} 
#Form2 { 
    width: 60%; 
    float: left; 
    margin-top: 15px; 
}

HTML樣本：

<div id="container"> 
    <form id="form1"> 
    <!-- Content of Form1 --> 
    </form> 
    <form id="form2"> 
    <!-- Content of Form2 --> 
    </form> 
</div>

來源

2017-09-15 Infinity

問題尋求幫助的代碼必須包括必要的重現它最短的代碼**在問題本身**最好在[**堆棧片段**]（https：//開頭博客。堆棧溢出。COM/2014/09 /引入可運行的JavaScript-CSS-和HTML的代碼段/）。請參閱[**如何創建最小，完整和可驗證的示例**]（http://stackoverflow.com/help/mcve） –

僅向Form1添加寬度並將其左移。另一個只會自然地浮起來，提供form2沒有容器 – Amy

儘管如此，所有的HTML對象都是**矩形**。你可能需要重新考慮你的結構。 –

您可以通過實現這個form1的定位絕對和在多個div雖然deviding窗口2（仍然是一個父窗體），喜歡這裏：https://jsfiddle.net/v6g1h14d/1/

div { 
 
    box-sizing: border-box; 
 
} 
 
#container { 
 
    position: relative; 
 
} 
 
#Form1 { 
 
    padding: 5px; 
 
    width: 30%; 
 
    height: 50%; 
 
    background-color: red; 
 
    position: absolute; 
 
} 
 
#Form2 { 
 
    width: 60%; 
 
    height: 300px; 
 
} 
 

 
form { 
 
    display: inline; 
 
} 
 

 
#Form2 .top { 
 
    padding: 5px; 
 
    margin-left: 50%; 
 
    background-color: yellow; 
 
    height: 50%; 
 
} 
 

 
#Form2 .bottom { 
 
    padding: 5px; 
 
    height: 50%; 
 
    background-color: yellow; 
 
}

<div id="container"> 
 
    <div id="Form1"> 
 
    <form> 
 
    form 1 
 
    </form> 
 
    </div> 
 
    <div id="Form2"> 
 
    <form> 
 
     <div class="top">content of form 2</div> 
 
     <div class="bottom">other content of form 2</div> 
 
    </form> 
 
    </div> 
 
</div>

來源

2017-09-15 10:53:36 Wouter

謝謝，那正是我需要的！ – Infinity

很高興提供幫助，只要確保您將它保存在相對位置的容器中，以便保留絕對元素。 – Wouter

所以我必須讓現在的div'＃容器'相對？ – Infinity

如果您需要的內容到底u必須在底部添加另一個<div>。

\t #form1 { 
 
    width: 68%; 
 
    padding-left: 32%; 
 
    height: 100vh; 
 
    background: aliceblue; 
 
} 
 
#form2 { 
 
    position: absolute; 
 
\t top: 0; 
 
\t left: 0; 
 
    width: 30%; 
 
    height: 500px; 
 
    background: beige; 
 
}

<div id="container"> 
 
    <form id="form1"> 
 
    <!-- Content of Form1 --> 
 
    </form> 
 
    <form id="form2"> 
 
    <!-- Content of Form2 --> 
 
    </form> 
 
</div>

來源

2017-09-15 11:00:25 Anuresh

最簡單的方法是使用float: left;爲#form1 https://jsfiddle.net/xixe/g74p7f2v/1/

來源

2017-09-15 11:11:44 xixe

試試這個，你需要兩個和Form1的浮動容器：左，第二自然會後餘音：

<div class="container"> 
<div class="left"> 
<input type="text"> 
<input type="text"> 
</div> 
<div class="right"> 
<input type="text"> 
<input type="text"> 

<label><input type="text"></label> 
<label><input type="text"></label> 
<label><input type="text"></label> 
<label><input type="text"></label> 
</div> 
</div>

CSS：

.left { 
float:left; 
width:300px; 
border: 1px solid green; 
} 

.right { 
border:1px solid blue; 
} 

input { 
display: block; 
margin: 20px; 
}

here is fiddle

來源

2017-09-15 12:20:31

CSS對齊2 HTML表單

回答

相關問題