用DIV替换表格布局

时间:2015-11-30 20:11:45

标签: html css

我是CSS布局的DIV标签的新手。我在表中有以下布局,并尝试用DIV替换。我们在我们的应用程序中使用DIV标签。所以我不想干扰现有的布局。我很感激任何意见。

<table style="width:100%;" border="1">
    <tr>
    <td style="width: 80%; " colspan="4"></td><td rowspan="3"></td>
    </tr>
    <tr>
    <td style="width: 20%; "></td><td style="width: 20%; "></td><td style="width: 20%; "></td><td style="width: 20%;"></td>
    </tr>
    <tr>
    <td style="width: 40%; " colspan="2"></td><td style="width: 40%; " colspan="2"></td>
    </tr>
</table>

enter image description here

1 个答案:

答案 0 :(得分:1)

正如有人提到的那样,您应该使用某些框架,例如 Bootstrap ,例如:http://getbootstrap.com/css/#grid

然而,这是一个小的 小提琴示例 &#34; table&#34;仅使用&#34; DIV标记&#34;:https://jsfiddle.net/Munja/q3f21Lnk/

    trackerHead.setOnTouchListener(new View.OnTouchListener() {
        private int initialX;
        private int initialY;
        private float initialTouchX;
        private float initialTouchY;

        @Override public boolean onTouch(View v, MotionEvent event) {
            switch (event.getAction()) {
                case MotionEvent.ACTION_DOWN:
                    initialX = params.x;
                    initialY = params.y;
                    initialTouchX = event.getRawX();
                    initialTouchY = event.getRawY();
                    return true;
                case MotionEvent.ACTION_UP:
                    TranslateAnimation animation = new TranslateAnimation(
                            TranslateAnimation.ABSOLUTE, params.x,
                            TranslateAnimation.ABSOLUTE, initialX,
                            TranslateAnimation.ABSOLUTE, params.y,
                            TranslateAnimation.ABSOLUTE, params.y);
                    animation.setDuration(4000);
                    animation.setRepeatCount(1);
                    animation.setInterpolator(new AccelerateInterpolator());
                    trackerHead.startAnimation(animation);
                    params.x = initialX;
                    return true;
                case MotionEvent.ACTION_MOVE:
                    params.x = initialX + (int) (event.getRawX() - initialTouchX);
                    params.y = initialY + (int) (event.getRawY() - initialTouchY);
                    windowManager.updateViewLayout(trackerHead, params);
                    return true;
            }
            return false;
        }
    });

enter image description here