html - 如何设置内容 div 正确对齐？

Question

我的代码和演示是这样的:https://jsfiddle.net/oscar11/tptrfph1/

我想设置<div class="right">正确对齐。我试试 margin: 0 , 它不起作用。

我的代码是jsfiddle是静态的

实际上我的代码是这样动态的:

<div class="global">
            <div class="left">
                <div style="width: {{ $length_of_text }}mm; margin-left: -15px !important;"> 
                    abcdeeeeeeeeeeeee <br>
                    cdeeeeeeeaberccccccccc
                </div>
                <hr style="max-width: {{ $length_of_line }}mm; margin-left:0; height:1px; border:none; color:#333;background-color:#333;">
            </div>

            <div class="right">
                <div style="width: {{ $length_of_text_two }}mm;"> 
                    <table>
                        <tr style="padding-right:35px">
                            <td>Attachment</td>
                            <td align="right">Latter Fans 023/PT</td>
                        </tr>
                        <tr>
                            <td>Number</td>
                            <td align="right">B / 123 / I / 2016</td>
                        </tr>
                        <tr>
                            <td>Date</td>
                            <td align="right">12 May 2017</td>
                        </tr>
                    </table>
                </div>
                <hr style="max-width: {{ $length_of_line_two }}mm; margin-left:0 height:1px; border:none; color:#333;background-color:#333;">

            </div>
        </div>

$length_of_text的变量, $length_of_line , $length_of_text_two , $length_of_line_two是用户的输入

我要<div class="right">在最右边的 Angular 落。所以当你长大了，就剩下了。

我试试 margin: 0和 text align right , 但它不起作用

我该如何解决？

Answer 1

如果您只是删除 margin-left: 75%; 行，您的 div 将在右侧对齐。参见 this fiddle .

div.right {
    /* margin-left: 75%; */
}

更新:如果您也想将文本标题移到右侧，请添加 float: right; 和 clear: both; 到 div.right 样式(它们已添加到 this fiddle 中):

div.right {
    /* margin-left: 75%; */
    float: right;
    clear: both;
}