From f46112d38561c89780eb44ecbba82347d2b912da Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Tue, 15 Aug 2017 22:34:48 +0800
Subject: [PATCH] refactor card extra style

---
 components/card/index.tsx        | 14 ++++----------
 components/card/style/index.less |  9 ++++-----
 2 files changed, 8 insertions(+), 15 deletions(-)

diff --git a/components/card/index.tsx b/components/card/index.tsx
index 51e86c79b1..70967d53db 100644
--- a/components/card/index.tsx
+++ b/components/card/index.tsx
@@ -108,16 +108,11 @@ export default class Card extends Component<CardProps, {}> {
     }
 
     let head;
-    if (!title) {
-      head = null;
-    } else {
-      head = typeof title === 'string' ? (
+    if (title || extra) {
+      head = (
         <div className={`${prefixCls}-head`}>
-          <h3 className={`${prefixCls}-head-title`}>{title}</h3>
-        </div>
-      ) : (
-        <div className={`${prefixCls}-head`}>
-          <div className={`${prefixCls}-head-title`}>{title}</div>
+          {title ? <div className={`${prefixCls}-head-title`}>{title}</div> : null}
+          {extra ? <div className={`${prefixCls}-extra`}>{extra}</div> : null}
         </div>
       );
     }
@@ -125,7 +120,6 @@ export default class Card extends Component<CardProps, {}> {
     return (
       <div {...others} className={classString} ref={this.saveRef}>
         {head}
-        {extra ? <div className={`${prefixCls}-extra`}>{extra}</div> : null}
         <div className={`${prefixCls}-body`} style={bodyStyle}>{children}</div>
       </div>
     );
diff --git a/components/card/style/index.less b/components/card/style/index.less
index b3ca714a50..62a00531cf 100644
--- a/components/card/style/index.less
+++ b/components/card/style/index.less
@@ -28,23 +28,22 @@
     border-bottom: @border-width-base @border-style-base @border-color-split;
     padding: 0 @card-padding-base;
     border-radius: @border-radius-sm @border-radius-sm 0 0;
+    .clearfix;
 
     &-title {
       font-size: @font-size-lg;
-      display: inline-block;
       text-overflow: ellipsis;
-      width: 100%;
+      max-width: 100%;
       overflow: hidden;
       white-space: nowrap;
       color: @card-head-color;
       font-weight: 500;
+      float: left;
     }
   }
 
   &-extra {
-    position: absolute;
-    right: @card-padding-base;
-    top: 14px;
+    float: right;
   }
 
   &-body {