html – CSS在右边的间隙中居div

概述我正在努力尝试用CSS设置一个非常基本的布局.我创建了以下jsFiddle以帮助解释(代码复制如下). http://jsfiddle.net/drmrbrewer/10jq4zka/1/ 基本上,我想要的是第一个,第二个和第三个div在一行上,第一个和第二个div按顺序排列在尽可能远的左边,第三个div在剩下的空间中居中第二个div的权利.该行应水平填充100％,以便在调整窗口大小时,第三个di 我正在努力尝试用CSS设置一个非常基本的布局.我创建了以下Jsfiddle以帮助解释(代码复制如下).

http://jsfiddle.net/drmrbrewer/10jq4zka/1/

基本上,我想要的是第一个,第二个和第三个div在一行上,第一个和第二个div按顺序排列在尽可能远的左边,第三个div在剩下的空间中居中第二个div的权利.该行应水平填充100％,以便在调整窗口大小时,第三个div将保持在第二个div右侧的空间中心,而第一个和第二个div保持静态.

#outer-container {  position: absolute;  wIDth: 100%;}#inner-container {  position: relative;  wIDth: 400px;}#one {  wIDth: 200px;  text-align: center;  float: left;}#two {  wIDth: 200px;  text-align: center;  float: left;}#three {  wIDth: 200px;  text-align: center;  margin-left: auto;  margin-right: auto;}

<div ID="outer-container">  <div ID="inner-container">    <div ID="one">one</div>    <div ID="two">two</div>  </div>  <div ID="three">three</div></div>

解决方法 我不确定你为什么需要内部容器.你可以在不使用内部容器的情况下实现你想要的东西(如果HTML是可编辑的,当然).

让我解释一下,而不是仅仅给出代码：

你可以浮动前两个div的左边.这将使它们彼此相邻.然后,您可以在父项上添加text-align：center,它将负责中心对齐第三个div.

您可以查看Jsfiddle链接http://jsfiddle.net/b5jk1d6k/,以便您可以调整大小并看到第三个div在调整浏览器窗口大小时居中对齐.

div {    display:inline-block;    height: 100px;    wIDth: 50px;}div.outer-container {    display: block;    text-align: center;    wIDth: 100%;}.one {    background-color:orange;    float:left;}.two {    background-color:red;    float:left;}.three {    background-color:yellow;}

<div >    <div >One</div>    <div >Two</div>    <div >Three</div></div>

希望这可以帮助！！！

总结

以上是内存溢出为你收集整理的html – CSS在右边的间隙中居div全部内容，希望文章能够帮你解决html – CSS在右边的间隙中居div所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。