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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/727958/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-28 23:34:12  来源:igfitidea点击:

What is the best way to left align and right align two div tags?

htmlalignment

提问by Daniel Kivatinos

What is the best way to right align and left align two div tags on a web page horizontally next to each other? I would like an elegant solution to do this if possible.

将网页上的两个 div 标签水平并排地右对齐和左对齐的最佳方法是什么?如果可能的话,我想要一个优雅的解决方案来做到这一点。

回答by Marcel Guzman

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

回答by sepehr

As an alternative way to floating:

作为浮动的替代方式:

<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>

Considering that there's no necessity to position the .left div as absolute (depending on your direction, this could be the .right one) due to that would be in the desired position in natural flow of html code.

考虑到没有必要将 .left div 定位为绝对(取决于您的方向,这可能是 .right ),因为它会在 html 代码的自然流中处于所需的位置。

回答by Calvin

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

回答by Ron

You can do it with few lines of CSScode. You can align all div's which you want to appear next to each other to right.

您可以使用几行CSS代码来完成。您可以将要彼此相邻显示的所有 div对齐到 right

<div class="div_r">First Element</div>
<div class="div_r">Second Element</div>

<style>
.div_r{
float:right;
color:red;
}
</style>

回答by JavaDragon

use padding tags the above float tags didnt worked out, I used

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

padding left:5px; 



padding left :30px

回答by Sachin Kotian

I used the below. The genre element will start where the DJ element ends,

我使用了下面的。流派元素将从 DJ 元素结束的地方开始,

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

pardon the inline css.

原谅内联css。

回答by Helzgate

This solution has left aligned text and button on the far right.

此解决方案在最右侧具有左对齐的文本和按钮。

If anyone is looking for a material design answer:

如果有人正在寻找材料设计答案:

<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>