Question

I have the following html structure for a template.php page in my website. 

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    ......
    </head>
    <body>
        <div id="container">
            <div class="header_div"> </div>
        <div>        

        <div id="body">
            <div id="nav_bar_left">
                <ul>
                    <li></li>
                </ul>
            </div>

            <div id="content_right">
                <?php $this->load->view($content); ?>
            </div>
        </div>

        <div style="clear: both"></div>

        <div class="footer"> </div>
        <div class="copyright"><p>Copyright &copy; All Rights Reserved.</p></div>
    </body>
</html>

然后我有一个load_view.php视图文件代码，如下所示

<div>   
    <?php echo form_open('main_controller/form_validate'); ?>  
    <table cellspacing="10">
        <tr>
            <td> </td> 
        </tr>
        <tr>
            .....
        </tr>
            ........
    </table>
    <?php echo form_close(); ?>
    <div class="clear"></div>
</div>

加载到我的控制器的内容区域

  function reg_pupil()
   {        
    $data['content'] = 'load_view';
    $this->load->view('template', $data);
   }

然而，当调整大小时，表单不会使用其父级调整大小。我如何解决这个问题，这个问题是否有解决方案？

Answer 1

使用此样式进行响应。

<style>
@media (max-width:640px) {
table {
    display:block;
    width:100%;
    padding:0;
    margin:0 auto;
}
tbody, tr {
    display:block;
    width:100%;
}
table td {
    display:inline-block;
    float:left;
    width:100%;
}
}
</style>

儿童div没有与父母一起调整大小

1 个答案: