html – 水平对齐没有float的div

概述参见英文答案 > How align 2 adjacent divs horizontally WITHOUT float?                                    5个 我想知道是否存在一个优雅的方式来水平对齐3个div,而不使用float css属性. HTML： <div id="parent"> <div id="first">Left</div> 参见英文答案 > How align 2 adjacent divs horizontally WITHOUT float?5个
我想知道是否存在一个优雅的方式来水平对齐3个div,而不使用float CSS属性.

HTML：

<div ID="parent">    <div ID="first">left</div>    <div ID="second">MIDdle</div>    <div ID="third">Right</div></div>

我问这个问题是因为父div没有float属性,并且向子节点添加float会导致页面调整大小的问题.

解决方法 您可以使用display：inline-block或display：table-cell与内部内容.

> Flex布局(参见T J’s answer)：

#parent{ display:flex; justify-content: space-between; }

JSFiddle

>表布局：

#parent{ display:table; wIDth:100%; }#parent div{ display:table-cell; }#first{ text-align:left; }#second{ text-align:center; }#third{ text-align:right; }

JSFiddle

>内嵌块布局：

#parent{ wIDth:100%; white-space:nowrap; }#parent div{ display:inline-block; wIDth:33.3%;}#first{ text-align:left; }#second{ text-align:center; }#third{ text-align:right; }

JSFiddle

总结

以上是内存溢出为你收集整理的html – 水平对齐没有float的div全部内容，希望文章能够帮你解决html – 水平对齐没有float的div所遇到的程序开发问题。

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