html – 如何将两个表单彼此相邻放置在图像的中心

概述我正在用正确的方法拉出我的头发,用html和css定位两个表格.我已经尝试了浮动和显示：内联块但只设法使用其中一种方法使其中一半工作. 我的目标是让两个表单以DIV为中心彼此相邻,DIV只占页面的70％,每个表单占用可用空间的50％.两种形式都需要具有最小宽度,如果没有足够的空间同时显示彼此(即在纵向模式下在手机上显示页面时),则应将其推入单独的行中 如果我浮动包含表格的两个DIV,它们并排显示但 我正在用正确的方法拉出我的头发,用HTML和CSS定位两个表格.我已经尝试了浮动和显示：内联块但只设法使用其中一种方法使其中一半工作.

我的目标是让两个表单以div为中心彼此相邻,div只占页面的70％,每个表单占用可用空间的50％.两种形式都需要具有最小宽度,如果没有足够的空间同时显示彼此(即在纵向模式下在手机上显示页面时),则应将其推入单独的行中

如果我浮动包含表格的两个div,它们并排显示但没有正确居中(因为它们向左或向右浮动,我需要将每个div的大小设置为40％或者它们不适合每个div其他).
如果我使用display：inline-block,div的大小正确且居中,但是分成两行并且彼此不相邻.

这是使用display的当前代码：inline-block

#background {  background-image: url(pic.jpg);  height: 400px;  background-size: cover;  background-repeat: no-repeat;  position: relative;  background-position: center;}#form-wrapper {  wIDth: 70%;  margin: 0 auto;  text-align: center;}#form1 {  wIDth: 50%;  display: inline-block;}#form2 {  wIDth: 50%;  display: inline-block;}@H_502_19@  
<div ID="background">  <div ID="form-wrapper">    <div ID="form1">      <form>some form code here</form>    </div>    <div ID="form2">      <form>some form code here</form>    </div>  </div></div>@H_502_19@  
使用display时,为什么表单在不同的行上？inline-block？
解决方法 您可能无法将两个内联块元素彼此相邻,因为50％乘以2加上元素之间的空白区域大于容器的100％.因此,第二个元素没有足够的空间并包裹到下一行.  
  
内联块元素将尊重HTML代码中的空格.两个元素之间的空白区域如下所示：
  
  
#background {  background-image: url(pic.jpg);  height: 400px;  background-size: cover;  background-repeat: no-repeat;  position: relative;  background-position: center;}#form-wrapper {  wIDth: 70%;  margin: 0 auto;  text-align: center;}#form1 {  wIDth: 40%;  display: inline-block;  background-color: #CCC;}#form2 {  wIDth: 40%;  display: inline-block;  background-color: #CCC;}@H_502_19@  
<div ID="background">  <div ID="form-wrapper">    <div ID="form1">      <form>some form code here</form>    </div>    <div ID="form2">      <form>some form code here</form>    </div>  </div></div>@H_502_19@  
因此,您的问题的一个解决方案是删除空白区域,如下所示.
  
我还给每个元素一个最小宽度,以便当窗口低于指定宽度时它们会换行.要查看此 *** 作,请单击右上角的“完整页面”按钮,然后调整浏览器窗口的大小.
  
  
#background {  background-image: url(pic.jpg);  height: 400px;  background-size: cover;  background-repeat: no-repeat;  position: relative;  background-position: center;}#form-wrapper {  wIDth: 70%;  margin: 0 auto;  text-align: center;}#form1 {  wIDth: 50%;  display: inline-block;  min-wIDth:200px;}#form2 {  wIDth: 50%;  display: inline-block;  min-wIDth:200px;}@H_502_19@  
<div ID="background">  <div ID="form-wrapper">    <div ID="form1">      <form>some form code here</form>    </div><div ID="form2">      <form>some form code here</form>    </div>  </div></div>@H_502_19@                            	          总结       
以上是内存溢出为你收集整理的html – 如何将两个表单彼此相邻放置在图像的中心全部内容，希望文章能够帮你解决html – 如何将两个表单彼此相邻放置在图像的中心所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
					
										


					

						
欢迎分享，转载请注明来源：内存溢出
原文地址: https://www.outofmemory.cn/web/1078016.html