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">位于最右侧。所以，当你长大后，它就会离开。

我尝试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;
}

Answer 2

通过添加float属性，您可以将div定位在相应的位置。在你的情况下，一个div在右边，另一个在左边。文本对齐用于对齐文本。

div.left {
    float: left;
    text-align: left;
}

div.right {
    float:right
    text-align:right
}

check this js fiddle modified

Answer 3

你可以弯曲盒子。看着你的小提琴，我想这{{$ length_of_line_two}}是在计算tex的长度后增加div的宽度。使用flex时，宽度将增加并且当它无法再占据该空间时将下降到下一行。请参阅 JSFiddle

报告

    <style type="text/css"> 

        .tg { border-collapse: collapse; border-spacing: 0; width: 100%; table-layout: fixed; }
        .tg td { padding: 2px 1px; border-style: solid; border-width: 1px; overflow: hidden; word-break: normal; }
        .tg th { word-wrap: break-word; padding: 4px 3px; border-style: solid; border-width: 1px; overflow: hidden; word-break: normal; }
        .tg .tg-3wr7 { text-align: center; }
        .tg .tg-ti5e { font-size: 9px; text-align: center; }
        .tg .tg-rv4w { font-size: 9px; }
        body {  
            font-family: "Arial", Helvetica, sans-serif !important;
            font-size: 9px;
            margin-bottom: 100px;
            width: 960px;
            margin: 0 auto
        }

        div.global{
            width: 100%;
            font-size: 12px;
        }

        div.center {
            margin-left: 27%;
            width: 485px;
            text-align: center;
            font-size: 12px;
        }

        div.signature {
            margin-left: 70%;
            width: 250px; 
            text-align: center;
            font-size: 12px;
        }

        .tg tr.content td{
            border-top: none !important;
            border-bottom: none !important;
        }

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

        <div class="right">
            <div style="max-width: 80mm;"> 
                <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: 80mm; margin-left:0 height:1px; border:none; color:#333;background-color:#333;">

        </div>
    </div>

    <div class="center">
        Budget execution report <br>
        PERIOD : 1 JANUARY To 31 December 2017
    </div>
    <br>
    <table class="tg">
        <thead>
            <tr>
                <td class="tg-3wr7" rowspan="2">NO<br></td>
                <td class="tg-3wr7" rowspan="2">KOLOM 1<br></td>
                <td class="tg-3wr7" rowspan="2">KOLOM 2<br></td>
                <td class="tg-3wr7" rowspan="2">KOLOM 3<br></td>
                <td class="tg-3wr7" rowspan="2">KOLOM 4<br></td>
                <td class="tg-3wr7" rowspan="2">KOLOM 5<br></td>
                <td class="tg-3wr7" rowspan="2">KOLOM 6<br></td>
                <td class="tg-3wr7" rowspan="2">KOLOM 7<br></td>
                <td class="tg-3wr7" rowspan="2">KOLOM 8<br></td>
                <td class="tg-3wr7" rowspan="2">KOLOM 9<br></td>
                <td class="tg-3wr7" rowspan="2">KOLOM 10<br></td>
                <td class="tg-3wr7" rowspan="2">KOLOM 11<br></td>
                <td class="tg-3wr7" rowspan="2">KOLOM 12<br></td>
                <td class="tg-3wr7" colspan="2">KOLOM 13<br></td>
                <td class="tg-3wr7" rowspan="2">KOLOM 14<br></td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="tg-3wr7" rowspan="2">1<br></td>
                <td class="tg-3wr7" rowspan="2">2<br></td>
                <td class="tg-3wr7" rowspan="2">3<br></td>
                <td class="tg-3wr7" rowspan="2">4<br></td>
                <td class="tg-3wr7" rowspan="2">5<br></td>
                <td class="tg-3wr7" rowspan="2">6<br></td>
                <td class="tg-3wr7" rowspan="2">7<br></td>
                <td class="tg-3wr7" rowspan="2">8<br></td>
                <td class="tg-3wr7" rowspan="2">9<br></td>
                <td class="tg-3wr7" rowspan="2">10<br></td>
                <td class="tg-3wr7" rowspan="2">11<br></td>
                <td class="tg-3wr7" rowspan="2">12<br></td>
                <td class="tg-3wr7" rowspan="2">13<br></td>
                <td class="tg-3wr7" colspan="2">14<br></td>
                <td class="tg-3wr7" rowspan="2">15<br></td>
            </tr>
        </tbody>            
    </table>
    <br>
    <div class="signature">
        London,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;10 May 2017<br><br><br><br><br><br>
        Eden Hazard<br>
        Chelsea Player
    </div>
</body>

div.global {
    width: 100%;
    font-size: 12px;
    display: flex;
    flex-wrap: wrap;
}
div.left {
    width: 50%;
    text-align: center;
    flex-grow: 1;
    border: 1px red solid;
}
div.right {
    display: flex;
    justify-content: flex-end;
    border: 1px red solid;
}

如何设置内容div对齐？

3 个答案: