如何将div分成列并在其中包装和图像

时间:2018-02-08 04:44:44

标签: php html cakephp-3.0

我正在尝试创建一个包含多个div的配置文件页面,我需要将其分成两列,顶部是图像。我的图像显示得很好,但我似乎无法将信息分成两列......目前它们都在页面上流动。

以下是我在cakephp中开发的代码:

<!--Profile Code-->

<div class="users view large-9 medium-8 columns content">

    <div class="row"> 

        <!--box style-->
        <div class="panel panel-default">

            <!--whitespace around panel-->
            <div class="panel-body">

                <div>
                    <h4 style="color:#00b1b1;"><?= h($user->name) ?></h4>           
                </div>
                <div class="box box-info">

                    <div class="box-body">

                        <div  align="left"><img height="200px" width="200px" alt="Users Picture" src=""> 
                            <input id="profile-image-upload" class="hidden" type="file">
                        </div>                        

                    <div class="col-sm-5">First Name: </div><div class="col-sm-4"><?= h($user->first_name) ?></div>                                                     

                    <div class="col-sm-5">Last Name:</div><div class="col-sm-4"> <?= h($user->last_name) ?></div>                                                      

                    <div class="col-sm-5">Username:</div><div class="col-sm-4"> <?= h($user->username) ?></div>                                

                    <div class="col-sm-5">Email:</div><div class="col-sm-4"> <?= h($user->email) ?></div>                               

                    <div class="col-sm-5">Role:</div><div class="col-sm-4"><?= h($user->role) ?></div>                                

                    <div class="col-sm-5">User ID:</div><div class="col-sm-4"><?= $this->Number->format($user->id) ?></div>                               

                    <div class="col-sm-5">Created:</div><div class="col-sm-4"><?= h($user->created) ?></div>                                

                    <div class="col-sm-5">Modified:</div><div class="col-sm-4"><?= h($user->modified) ?></div>                                

                    <div class="col-sm-5">Active:</div><div class="col-sm-4"><?= $user->active ? __('Yes') : __('No'); ?></div>

                    <!-- /.box-body -->
                    </div>
                <!-- /.box info -->
                </div>
            </div>

        </div>

    </div>  
    <script>
        $(function() {
        $('#profile-image1').on('click', function() {
        $('#profile-image-upload').click();
            });
        });       
    </script>   

0 个答案:

没有答案