Question

我想将div中的表格与div的右侧对齐，但是它们是左对齐的，我的CSS有什么问题？我在div里面有一个表，其中包含一个文本和一张图片，我想要的是将表放在右侧，在表格中使用align = right。还有一些我希望在左侧对齐的表格，如何在页面右侧对齐某些表格或在同一页面左侧对齐某些表格？感谢

<!DOCTYPE html>
    <html>
        <head>
            <title>Landing</title>

            <style>
            .form-section{
                margin:15px;
            }
            </style>
        </head>
        <body>
            <div class="jumbotron" align="center">
                <img src="/static/img/Chaatz-192x192px.jpg" class="img-responsive" alt="Responsive image" style="width:10%;height:10%">
                <h2></h2>
            </div>
            <div class="container">
                <div class="row">
                <div class="row" style="width:100%">
        <form class="form-horizontal">


                        <table align="right">
                             <tr>
                                 <td>
                                    test(user11)
                                    H111i
                                    2016-08-12 07:46:22
                                 </td>
                                <td><img src=http://d2h8t8into6exa.cloudfront.net/user_comic_avatars/VkKDIkBHsd.jpg alt="Smiley face" height="80" width="80"></td>
                             <tr>
                         </table>
                         <br>




                        <table align="right">
                             <tr>
                                 <td>
                                    test(user11)
                                    H111i
                                    2016-08-12 07:46:21
                                 </td>
                                <td><img src=http://d2h8t8into6exa.cloudfront.net/user_comic_avatars/VkKDIkBHsd.jpg alt="Smiley face" height="80" width="80"></td>
                             <tr>
                         </table>
                         <br>




    <style>
    .multiline
    {
      padding:0px;
      white-space: pre-wrap;
      height: 100px;
      width: 50%;
      margein:0px
    }    
       .row {
      display: flex;  
    }    
    td { white-space:pre }

    </style>

Answer 1

请按此更新您的代码。问题是，.row应该将'col-`作为他们的孩子作为标准做法。

.multiline
{
    padding:0px;
    white-space: pre-wrap;
    height: 100px;
    width: 50%;
    margein:0px
}            
td { white-space:pre }

.user-table{width:100%;}
.user-table tr > td{
    text-align:right;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="jumbotron" align="center">
    <img src="/static/img/Chaatz-192x192px.jpg" class="img-responsive" alt="Responsive image" style="width:10%;height:10%">
    <h2></h2>
</div>
<div class="container">
    <div class="row">
        <form class="form-horizontal">
            <div class="col-sm-12 col-md-12">     
                <table class="user-table">
                    <tr>
                        <td>
                            test(user11)
                            H111i
                            2016-08-12 07:46:22
                        </td>
                        <td><img src=http://d2h8t8into6exa.cloudfront.net/user_comic_avatars/VkKDIkBHsd.jpg alt="Smiley face" height="80" width="80"></td>
                    <tr>
                </table>
            </div>
            <div class="col-sm-12">                                                      
                <table class="user-table">
                    <tr>
                        <td>
                            test(user11)
                            H111i
                            2016-08-12 07:46:21
                        </td>
                        <td><img src=http://d2h8t8into6exa.cloudfront.net/user_comic_avatars/VkKDIkBHsd.jpg alt="Smiley face" height="80" width="80"></td>
                    <tr>
                </table>
            </div>
        </form>
    </div>
<div>

如何在div中对齐内容

1 个答案: