HTML 日期显示对齐

Question

我正在设计一个网页，其中有一个日期列表显示在另一个下方。我想对齐日期，使它们完美地排列在彼此下方。我试过使用 align 但它没有什么不同。我也尝试放置一个样式标签，但我收到一条错误消息:“在此上下文中，元素“style”不允许作为元素“div”的子元素。”

页面代码如下:

<div class="report-title">
    <h1>Response Tracking Report</h1>
</div>
<div class="info">
    <div style="width:93%;float:left;">
        <p class="title">Project: </p>
        <p class="value"><?php echo $response_data['project_name']; ?></p>
    </div>
    <div class="spacer"></div>
    <div style="width:7%;float:left;">
        <p class="value"><?php echo date("Y-m-d"); ?></p>
    </div>
    <div class="bottom"></div>
</div>
<div id='response-info' class='info'>
    <div style='width:100%;'>
        <p class='title'>Risk Statement: </p>
        <p id='risk_statement' class='value'><?php echo $response_data['risk_statement']; ?></p>
        <br/><br/>
    </div>
    <div style='width:24%;float:left;'>
        <p class='title'>WBS: </p><p class='value'><?php echo $response_data['WBS']; ?></p>
        <br/><br/>
        <p class='title'>Date of Plan: </p><p class='value' ><?php echo $response_data['date_of_plan']; ?></p>
        <br/><br/>
        <p class='title'>Last Updated: </p><p class='value' ><?php echo $response_data['date_of_update']; ?></p>
        <br/><br/>
        <p class='title'>Planned Closure: </p><p class='value' ><?php echo $response_data['planned_closure']; ?></p>
    </div>
    <div class='spacer' style='width:1%;float:left;height:1px;'></div>
    <div style='width:24%;float:left;'>
        <p class='title'>Owner: </p><p class='value'><?php echo $response_data['owner']; ?></p>
        <br/><br/>
        <p class='title'>Cost: </p><p class='value'>$<?php echo round($response_data['cost']); ?></p>
        <br/><br/>
        <p class='title'>Release Progress: </p><p class='value'><?php echo $response_data['release_progress']; ?></p>
        <br/><br/>
        <p class='title'>Action: </p><p class='value'><?php echo $response_data['action']; ?></p>
    </div>
    <div class='spacer' style='width:1%;float:left;height:1px;'></div>
    <div style='width:50%;float:left;'>
        <p class='title'>Current Status: <br/> </p><p class='value'><?php echo $response_data['current_status']; ?></p>
        <br/>
        <br/>
        <p class='title'>Action Plan: <br/> </p><p class='value'><?php echo $response_data['action_plan']; ?></p>
    </div>
    <div id='bottom' style='clear:both;width:100%'></div>
</div>
<div id="ResponseUpdateTableContainer" class="jTableContainer" style="width:100%;"></div>
</body>

当前日期显示方式:http://imgur.com/UxbugwX

我是如何尝试获取它们的:http://imgur.com/mAgfRYO

我是 html 的新手，所以请原谅我的错误。非常感谢所有帮助。

Answer 1

要使那些 DIV 对齐，您需要给它们相同的宽度，问题是当您有动态文本时，长度会超出您已经指定的宽度。

一个解决方案是模拟原生 table 样式，在 css
中使用 display 属性例如:

.table { display: table;      }
.row   { display: table-row;  }
.cell  { display: table-cell; }

然后，您的 html 将具有类似于此标记的内容:

<div class="table">
    <div class="row">
        <span class="cell title">WBS:</span>
        <span class="cell value">1.1</span>
    </div>
    <div class="row">
        <span class="cell title">Planned Closure:</span>
        <span class="cell value">2014-07-18</span>
    </div>
    <div class="row">
        <span class="cell title">Last Updated:</span>
        <span class="cell value">2014-09-10</span>
    </div>
    <div class="row">
        <span class="cell title">Date of Plan:</span>
        <span class="cell value">2014-04-26</span>
    </div>
</div>

jsFiddle 示例:http://jsfiddle.net/gmolop/csx10g64/