左alignment和右alignment两个div标签的最佳方法是什么?

什么是最好的方式来正确alignment和左alignment两个div标签水平彼此相邻的网页? 如果可能,我想要一个优雅的解决scheme。

<div style="float: left;">Left Div</div> <div style="float: right;">Right Div</div> 

作为浮动的替代方式:

 <style> .wrapper{position:relative;} .right,.left{width:50%; position:absolute;} .right{right:0;} .left{left:0;} </style> ... <div class="wrapper"> <div class="left"></div> <div class="right"></div> </div> 

考虑到没有必要将.left div放在绝对位置(取决于你的方向,这可能是正确的),因为这将在html代码的自然stream程中处于期望的位置。

 <style> #div1, #div2 { float: left; /* or right */ } </style> 

你可以用几行CSS代码来完成。 你可以将所有你想要出现的divalignment到右边

 <div class="div_r">First Element</div> <div class="div_r">Second Element</div> <style> .div_r{ float:right; color:red; } </style> 

使用填充标签上面的浮动标签没有解决,我使用

 padding left:5px; padding left :30px 

我用下面。 stream派元素将在DJ元素结束的地方开始,

 <div> <div style="width:50%; float:left">DJ</div> <div>genre</div> </div> 

请原谅内联的CSS。

该解决scheme在最右侧留下了alignment的文本和button。

如果有人正在寻找材料devise的答案:

 <div layout="column" layout-align="start start"> <div layout="row" style="width:100%"> <div flex="grow">Left Aligned text</div> <md-button aria-label="help" ng-click="showHelpDialog()"> <md-icon md-svg-icon="help"></md-icon> </md-button> </div> </div> 

你可以像这样使用一个父div标签:

 <!doctype html> <html> <head> <style> .parent{ text-align:center; } .child{ width:45%; display:inline-block; border:1px solid #cccccc; } </style> </head> <body> <div class="parent"> <div class="child">First Element</div> <div class="child">Second Element</div> </div> </body> </html>