如何在父div中使2div向左和1div正确？ [英] How to make 2div left and 1div right in parent div?

查看：79
本文介绍了如何在父div中使2div向左和1div正确？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想像facebook注册页面一样，查看该部分区域，并查看此图片：http：//imgur.com/itYcrKw



< pre lang =HTML> < div id = DivSection < span class =code-keyword>>

< div id = < span class =code-keyword> DivContent >
< div id = DivSlogan >
< label id = 口号 > Facebook帮助您与< 联系并分享
br > 生活中的人。
< / label >
< / div >

< div id = DivHomeImage >
< img alt = homeImage src = img\fbhome.png >
< / div >

< / div >

< div id = DivSignUp >



< 表格 >

< span class =code-keyword>< tr >
< td colspan = 2 > < label 样式 = font-size：xx-large;

class = lblbold > 创建帐户< / label > < / td >
< td > < / td >
< / tr >

< tr >
< td colspan = 2 > < 标签 class = lblbold > 它是免费的，
总是。< / label > < / td >
< td > < / td >
< / tr >


< tr >
< td > < 输入 id = inputFS type = text class = inputSup

name = fname 占位符 = 名字 > < / td >
< ; td > < 输入 id = inputFS 类型 = text class = inputSup

名称 = sname 占位符 = 姓 > < / td >
< / tr >

< < span class =code-leadattribute> tr >
< td colspan = 2 > < 输入 type = text class = inputSup

< span class =code-attribute> name = mobeml 占位符 = 手机号码或电子邮件地址 > ;
< / td >

< / tr >

< tr >
< td colspan = 2 > < 输入 type = text class = inputSup

name = rmobeml

占位符 = < span class =code-keyword>重新输入手机号码或电子邮件地址 > < / td >

< / tr >

< tr &g t;
< td colspan = 2 > < 输入 < span class =code-attribute> type = text class = inputSup

< span class =code-attribute> 名称 = npsw 占位符 = 新密码 > < / td >

< / tr >

< tr >
< span class =code-keyword>< td > < label class = lblbold > 生日< / label > < / td > ;
< / tr >

< tr >
< td > < 选择 name = day class = seldob >
< 选项 value = 0 已选择 > 日< / option >
< 选项 value = 1 > 1 < / option >
< 选项 值 = 2 > 2 < / option >
< 选项 value = 3 > 3 < / option >
< 选项 value = 4 > 4 < / option >
< 选项 value = 5 > 5 < / option >
< 选项 < span class =code-attribute> value = 6 > 6 < / option >
< option value = 7 > 7 < / option >
< < span class =code-leadattribute>选项 value = 8 > 8 < / option >
< 选项 值 = 9 > 9 < / option >
< 选项 value = 10 > 10 < / option >
< option value = 11 > 11 < / option >
< 选项 值 = 12 > 12 < / option >
< 选项 value = 13 < span class =code-keyword>> 13 < / optio n >
< 选项 值 = 14 > 14 < / option >
< 选项 value = 15 > 15 < / option >
< 选项 value = 16 < span class =code-keyword>> 16 < / option >
< 选项 < span class =code-attribute> value = 17 > 17 < / option >
< 选项 value = 18 > 18 < / option >
< 选项 值 = 19 > 19 < / option >
< 选项 value = 20 < span class =code-keyword>> 20 < / option >
< 选项 value = 21 > 21 < / option >
< 选项 value = 22 > 22 < / option >
< span class =code-keyword>< 选项 value = 23 > 23 < / option >
< 选项 value = 24 > 24 < / option >
< 选项 value = 25 > 25 < / option >
< 选项 值 = 26 > 26 < / option >
< 选项 value = 27 > 27 < / option >
< option value = 28 > 28 < / option >
< span class =code-keyword>< 选项 value = 29 > 29 < / option >
< 选项 value = 30 > 30 < / o ption >
< 选项 值 = 31 > 31 < / option >

< / select > < 选择 名称 = 月 class = seldob >
< 选项 value = 0\">Month</option>
\t\t\t\t\t\t\t\t<option value =\"1\">Jan< ;/option>
\t\t\t\t\t\t\t\t<option value=\"2\">Feb</option>
\t\t\t\t\t\t\t\t<option value=\"3\">Mar</option>
\t\t\t\t\t\t\t\t<option value=\"4\">Apr </option>
\t\t\t\t\t\t\t\t<option value=\"5\">May</option>
\t\t\t\t\t\t\t\t<option value=\"6\">Jun</option>
\t\t\t\t\t\t\t\t<option value=\"7\">Jul</option>
\t\t\t\t\t\t\t\t<option value=\"8\">Aug</option>
\t\t\t\t\t\t\t\t<option value=\"9\">Sep</option>
\t\t\t\t\t\t\t\t<option value=\"10\">Oct</option>
\t\t\t\t\t\t\t\t<option value=\"11\">Nov</option>
\t\t\t\t\t\t\t\t<option value=\"12\">Dec</option>
\t\t\t\t\t\t</select> <select name=\"year\" class=\"seldob\">
\t\t\t\t\t\t\t\t<option value=\"0\">Year</option>
\t\t\t\t\t\t\t\t<option value=\"1\">2010</option>
\t\t\t\t\t\t\t\t<option value=\"2\">2011</option>
\t\t\t\t\t\t\t\t<option value=\"3\">2012r</option>
\t\t\t\t\t\t\t\t<option value=\"4\">2013</option>
\t\t\t\t\t\t\t\t<option value=\"5\">2014</option>
\t\t\t\t\t\t\t\t<option value=\"6\">2015</option>
\t\t\t\t\t\t\t\t<option value=\"7\">2016</option>
\t\t\t\t\t\t</select></td>
\t\t\t\t\t\t<td><label class=\"lblnote\"><a href=\"\">Why do i
\t\t\t\t\t\t\t\t\tneed to provide my<br> date of birth?
\t\t\t\t\t\t\t</a></label></td>
\t\t\t\t\t</tr>

\t\t\t\t\t<tr>
\t\t\t\t\t\t<td colspan=\"2\"><input type=\"radio\" name=\"gender\"

\t\t\t\t\t\t\tvalue=\"female\"><label>Female</label> <input type=\"radio\"

\t\t\t\t\t\t\tname=\"gender\" value=\"male\" checked><label>Male</label></td>
\t\t\t\t\t</tr>

\t\t\t\t\t<tr>
\t\t\t\t\t\t<td colspan=\"2\"><label class=\"lblnote\">By clicking
\t\t\t\t\t\t\t\tCreate an account, you agree to our <a href=\"\">Terms</a> and<br>
\t\t\t\t\t\t\t\tthat you have read our <a href=\"\">Data Policy</a> , including
\t\t\t\t\t\t\t\tour <a href=\"\">Cookie Use</a>.
\t\t\t\t\t\t</label></td>
\t\t\t\t\t</tr>

\t\t\t\t\t<tr>
\t\t\t\t\t\t<td id=\"tdCreAcc\" colspan=\"2\"><input id=\"btnCA\" type=\"submit\"

\t\t\t\t\t\t\tname=\"signup\" value=\"Create an account\"></td>
\t\t\t\t\t</tr>

\t\t\t\t\t<tr>
\t\t\t\t\t\t<td colspan=\"2\"><label> <a href=\"\">Create a Page</a>
\t\t\t\t\t\t\t\tfor a celebrity, band or business.
\t\t\t\t\t\t</label></td>
\t\t\t\t\t</tr>

\t\t\t\t</table>

\t\t\t</div>


\t\t</div>







CSS code



body 
 { 
 \tmargin: 0 auto; 
 \theight:100%; 
 \tfont-family: Calibri; 
 \toverflow: scroll; 
 } 
  
  
  
 #DivBody 
 { 
 \tmargin: auto; 
 \twidth:1024px; 
 } 
  
 #DivHeader 
 {\t 
 \tmargin:auto; 
 \twidth:100%; 
 \tcolor: white; 
 \tbackground-color: #3b5998; 
 \tdisplay: inline-block; 
 } 
  
  
  
 #DivSection 
 { 
 \theight: 83%; 
     position: absolute; 
     width: 1024px;    
     border: 1px solid gray; 
     padding-top: 23px; 
 } 
  
 #DivContent 
 { 
 \twidth: 50%; 
 } 
  
 #DivSlogan 
 { 
 \tfloat:left; 
     color: #0e385f; 
     font-size: 20px; 
     font-weight: bold; 
 } 
  
 #DivHomeImage 
 {  
 \tfloat:left; 
 \tmargin-top:  5%; 
 \tposition: absolute; 
 } 
  
 #DivSignUp  
 { 
 \tfloat: right; 
 \tborder-radius: 5px; 
 \t    position:absolute; 
     ri ght: 171px; 
 } 
  
  
  
  
  
 #DivFooter 
 { 
 \t 
 \twidth:1024px ; 
 \tdisplay: inline-block; 
     bottom: 0; 
      
 }





What I have tried:



i have tried to give \"float:left\" to the child left side divs, and give float:right to child right side div but not get proper display.

解决方案

Float: left to divContent and you should be all set. Remove floats from Slogan and HomeImage. You have to float parent containers.



Anyhow, better design would be to put everything in 2-column layout or even use modern columned div (assuming you don’t have to support older browsers).



You could use 

<aside>

tag (html 5) for your login part.


i want to make same like facebook signup page, check out that section area, and check this image:http://imgur.com/itYcrKw

<div id="DivSection">

			<div id="DivContent">
				<div id="DivSlogan">
					<label id="slogan">Facebook help you to connecct and share
						with the<br> people in your life.
					</label>
				</div>

				<div id="DivHomeImage">
					<img alt="homeImage" src="img\fbhome.png">
				</div>

			</div>

			<div id="DivSignUp">



				<table>

					<tr>
						<td colspan="2"><label style="font-size: xx-large;"

							class="lblbold">Create an account</label></td>
						<td></td>
					</tr>

					<tr>
						<td colspan="2"><label class="lblbold">it's free and
								always will be.</label></td>
						<td></td>
					</tr>


					<tr>
						<td><input id="inputFS" type="text" class="inputSup"

							name="fname" placeholder="First Name"></td>
						<td><input id="inputFS" type="text" class="inputSup"

							name="sname" placeholder="Surname"></td>
					</tr>

					<tr>
						<td colspan="2"><input type="text" class="inputSup"

							name="mobeml" placeholder="Mobile number or email address">
						</td>

					</tr>

					<tr>
						<td colspan="2"><input type="text" class="inputSup"

							name="rmobeml"

							placeholder="Re-Enter mobile number or email address"></td>

					</tr>

					<tr>
						<td colspan="2"><input type="text" class="inputSup"

							name="npsw" placeholder="New password"></td>

					</tr>

					<tr>
						<td><label class="lblbold">Birthday</label></td>
					</tr>

					<tr>
						<td><select name="day" class="seldob">
								<option value="0" selected>Day</option>
								<option value="1">1</option>
								<option value="2">2</option>
								<option value="3">3</option>
								<option value="4">4</option>
								<option value="5">5</option>
								<option value="6">6</option>
								<option value="7">7</option>
								<option value="8">8</option>
								<option value="9">9</option>
								<option value="10">10</option>
								<option value="11">11</option>
								<option value="12">12</option>
								<option value="13">13</option>
								<option value="14">14</option>
								<option value="15">15</option>
								<option value="16">16</option>
								<option value="17">17</option>
								<option value="18">18</option>
								<option value="19">19</option>
								<option value="20">20</option>
								<option value="21">21</option>
								<option value="22">22</option>
								<option value="23">23</option>
								<option value="24">24</option>
								<option value="25">25</option>
								<option value="26">26</option>
								<option value="27">27</option>
								<option value="28">28</option>
								<option value="29">29</option>
								<option value="30">30</option>
								<option value="31">31</option>

						</select> <select name="month" class="seldob">
								<option value="0">Month</option>
								<option value="1">Jan</option>
								<option value="2">Feb</option>
								<option value="3">Mar</option>
								<option value="4">Apr</option>
								<option value="5">May</option>
								<option value="6">Jun</option>
								<option value="7">Jul</option>
								<option value="8">Aug</option>
								<option value="9">Sep</option>
								<option value="10">Oct</option>
								<option value="11">Nov</option>
								<option value="12">Dec</option>
						</select> <select name="year" class="seldob">
								<option value="0">Year</option>
								<option value="1">2010</option>
								<option value="2">2011</option>
								<option value="3">2012r</option>
								<option value="4">2013</option>
								<option value="5">2014</option>
								<option value="6">2015</option>
								<option value="7">2016</option>
						</select></td>
						<td><label class="lblnote"><a href="">Why do i
									need to provide my<br> date of birth?
							</a></label></td>
					</tr>

					<tr>
						<td colspan="2"><input type="radio" name="gender"

							value="female"><label>Female</label> <input type="radio"

							name="gender" value="male" checked><label>Male</label></td>
					</tr>

					<tr>
						<td colspan="2"><label class="lblnote">By clicking
								Create an account, you agree to our <a href="">Terms</a> and<br>
								that you have read our <a href="">Data Policy</a> , including
								our <a href="">Cookie Use</a>.
						</label></td>
					</tr>

					<tr>
						<td id="tdCreAcc" colspan="2"><input id="btnCA" type="submit"

							name="signup" value="Create an account"></td>
					</tr>

					<tr>
						<td colspan="2"><label> <a href="">Create a Page</a>
								for a celebrity, band or business.
						</label></td>
					</tr>

				</table>

			</div>


		</div>




CSS code

body
{
	margin: 0 auto;
	height:100%;
	font-family: Calibri;
	overflow: scroll;
}



#DivBody
{
	margin: auto;
	width:1024px;
}

#DivHeader
{	
	margin:auto;
	width:100%;
	color: white;
	background-color: #3b5998;
	display: inline-block;
}



#DivSection
{
	height: 83%;
    position: absolute;
    width: 1024px;   
    border: 1px solid gray;
    padding-top: 23px;
}

#DivContent
{
	width: 50%;
}

#DivSlogan
{
	float:left;
    color: #0e385f;
    font-size: 20px;
    font-weight: bold;
}

#DivHomeImage
{ 
	float:left;
	margin-top:  5%;
	position: absolute;
}

#DivSignUp 
{
	float: right;
	border-radius: 5px;
	    position:absolute;
    right: 171px;
}





#DivFooter
{
	
	width:1024px ;
	display: inline-block;
    bottom: 0;
    
}



What I have tried:

i have tried to give "float:left" to the child left side divs, and give float:right to child right side div but not get proper display.

解决方案

Float: left to divContent and you should be all set. Remove floats from Slogan and HomeImage. You have to float parent containers.

Anyhow, better design would be to put everything in 2-column layout or even use modern columned div (assuming you don't have to support older browsers).

You could use 

<aside>

tag (html 5) for your login part.


这篇关于如何在父div中使2div向左和1div正确？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发语言最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆