Question

<!DOCTYPE html>
<html lang="en">
    <head>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
      <style type="text/css">
        .test span:first-child{font-weight: 900;color: #333;margin-right: 15px;display: inline-block;width: 40px;}
        .test{position: relative;}
        @media (min-width: 1200px){
        .test p:nth-last-child(1) {float: right;display: inline-block;position: absolute;top: 37px;right: 0%;margin-top: 0;}
        .test p:nth-last-child(2) {float: right;position: absolute;top: 0px;right: 0%;display: inline-block;margin-top: 0;}
        }
        @media (min-width: 720px) and (max-width: 1199px) {
        .test p:nth-last-child(1) {float: right;display: inline-block;position: absolute;top: 37px;right: -50%;margin-top: 0;}
        .test p:nth-last-child(2) {float: right;position: absolute;top: 0px;right: -50%;display: inline-block;margin-top: 0;}
        }
      </style>
    </head>
    <body>

        <div class="row">
            <div class="col-sm-6 col-xs-24 test">       
                <p><span>Mon</span><span>9 am - 10 pm</span></p>        
                <p><span>Tue</span><span>9 am - 10 pm</span></p>        
                <p><span>Wed</span><span>9 am - 10 pm</span></p>        
                <p><span>Thur</span><span>9 am - 10 pm</span></p>       
                <p><span>Fri</span><span>8 am - 11 pm</span></p>        
                <p><span>Sat</span><span>8 am - 11 pm</span></p>        
                <p><span>Sun</span><span>Closed - </span></p>       
            </div>
        </div>

    </body>
</html>

当标记中的内容发生更改时，右侧标记未对齐。即使内容发生变化，如何使右侧代码对齐？在第一个标记上，您会看到日期和时间时间但在第二个标记中，您会看到已关闭

Fiddle

Answer 1

因为你正在使用bootstrap看看偏移列

问题可能是bootstrap在col- *类中也使用float

<div class="row">
  <div class="col-sm-6">
    <p class="row">
      <span class="col-sm-3">Column 1</span>
      <span class="col-sm-3 col-sm-offset-6">Column 3</span>
      <!-- the offset css class adds empty cols before the element -->
    </p>
  </div>
</div>

也许这是一个适合你的解决方案

Answer 2

使用表格代替你的结构

＆＃13;

<!DOCTYPE html>
<html lang="en">
    <head>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
      <style type="text/css">
        .test span:first-child{font-weight: 900;color: #333;margin-right: 15px;display: inline-block;width: 40px;}
        .test{position: relative;}
        @media (min-width: 1200px){
        .test p:nth-last-child(1) {float: right;display: inline-block;position: absolute;top: 37px;right: 0%;margin-top: 0;}
        .test p:nth-last-child(2) {float: right;position: absolute;top: 0px;right: 0%;display: inline-block;margin-top: 0;}
        }
        @media (min-width: 720px) and (max-width: 1199px) {
        .test p:nth-last-child(1) {float: right;display: inline-block;position: absolute;top: 37px;right: -50%;margin-top: 0;}
        .test p:nth-last-child(2) {float: right;position: absolute;top: 0px;right: -50%;display: inline-block;margin-top: 0;}
        }
        table td{
            padding-right: 50px;
        }
      </style>
    </head>
    <body>

        <div class="row">
            <div class="col-sm-6 test">       
                <table>
                    <tr>
                        <td>
                            <span>Mon</span><span>9 am - 10 pm</span>
                        </td>
                        <td>
                            <span>Sat</span><span>8 am - 11 pm</span>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <span>Tue</span><span>9 am - 10 pm</span>
                        </td>
                        <td>
                            <span>Sun</span><span>Closed - </span>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <span>Wed</span><span>9 am - 10 pm</span>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <span>Thur</span><span>9 am - 10 pm</span>  
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <span>Fri</span><span>8 am - 11 pm</span>
                        </td>
                    </tr>
                </table>
            </div>
        </div>

    </body>
</html>

＆＃13;

<p>标记对齐问题

2 个答案: