元素与百分比宽度

Question

Fiddle

问题：

1. 在我的小提琴，你可以看到最后盒（有日期和按钮）不跟别人不一样的尺寸。这个盒子应该分成两个，每个都有50％的宽度。

2. 在左边，我想日期容器相对于其父箱

3. 在右边的50％，我想50％的相对按钮容器是其母公司箱
4. 按钮应该相对于其容器对齐中心。

HTML

<div class='gc_container'> 
     <div class='gc_gift'> 
      <div class='gc_gift_inner'> 
       <div class='gc_amount'>TEST AMOUNT</div> 
       <div class='gc_subtitle'>TESTING SUBTITLE</div> 
       <div class='gc_hr'></div> 
       <div class='gc_terms'>Lorem Ipsum is simply dummy text of the printing and typesetting industry</div> 
       <div class='gc_footer'> 
        <div class='gc_footer_expiry'>Exp. March 27, 2013</div> 
        <div class='gc_footer_use_nix'> 
         <div class='gc_footer_use'> 
          <div class='gc_footer_button_wrapper'> 
           <div class='gc_footer_use_txt'>Use</div> 
           <div class='gc_footer_use_icon'>icon1</div> 
          </div> 
         </div> 
         <div class='gc_footer_nix'> 
          <div class='gc_footer_button_wrapper'> 
           <div class='gc_footer_nix_txt'>Nix</div> 
           <div class='gc_footer_nix_icon'>icon2</div> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 

CSS

.gc_gift { 
    margin-top:1.5%; 
    margin-left:auto; 
    margin-right:auto; 
    margin-bottom:1.5%; 
    height: auto; 
    width: 97%; 
    position:relative; 
    overflow: scroll; 
    webkit-overflow-scrolling: touch; 
    border:1px solid #D1D1D1; 
} 
.gc_gift_inner { 
    font-size:12px; 
    text-align: left; 
    background-color: #ffffff; 
    border:0px solid #D1D1D1; 
    display:table; 
    margin-top:2.5%; 
    margin-left:auto; 
    margin-right:auto; 
    margin-bottom:2.5%; 
    height: auto; 
    width: 95%; 
    position:relative; 
    overflow: scroll; 
    webkit-overflow-scrolling: touch; 
} 
.gc_amount { 
    color: red; 
    font-size:2em; 
} 
.gc_subtitle { 
    font-weight: bold; 
    font-size: 1em; 
    color: #707070; 
} 
.gc_hr { 
    width: 95%; 
    position: relative; 
    margin: auto; 
    border-color: #D1D1D1; 
    border-style: solid; 
    border-width: 1px 0 0 0; 
} 
.gc_terms { 
    font-size: 0.8em; 
    color: #707070; 
} 
.gc_footer { 
    width: 95%; 
    display: table; 
    position: relative; 
} 
.gc_footer_expiry { 
    display: table-cell; 
    vertical-align: bottom; 
    font-size: 0.8em; 
    font-weight: bold; 
    width: 40%; 
    color: #707070; 
    border: 0px solid yellow; 
} 
.gc_footer_use_nix { 
    display: inline-block; 
    vertical-align: middle; 
    width: 60%; 
    border:1px solid yellow; 
    margin: auto; 
} 
.gc_footer_use { 
    //display: table-cell; 
    display: inline-block; 
    vertical-align: middle; 
    background-color: #3F6EB6; 
    border-radius: 1px; 
    //padding: 5px 10px 5px 10px; 
    padding: 10%; 
    position: relative; 
    border:0px solid red; 
} 
.gc_footer_use_txt { 
    text-align: right; 
    display: table-cell; 
    vertical-align: middle; 
    color: white; 
    font-size: 1em; 
    font-weight: bold; 
} 
.gc_footer_use_icon { 
    text-align: right; 
    display: table-cell; 
    vertical-align: middle; 
} 
.gc_footer_nix { 
    //display: table-cell; 
    display: inline-block; 
    vertical-align: middle; 
    background-color: #D61920; 
    border-radius: 1px; 
    color: white; 
    font-size: 1em; 
    border: 0x solid green; 
    //padding: 5px 10px 5px 10px; 
    padding: 10%; 
} 
.gc_footer_nix_txt { 
    text-align: center; 
    display: table-cell; 
    vertical-align: middle; 
    position: relative; 
    border: 0px solid blue; 
    width: 50%; 
    font-weight: bold; 
} 
.gc_footer_nix_icon { 
    text-align: center; 
    display: table-cell; 
    vertical-align: middle; 
    position: relative; 
    border: 0px solid yellow; 
    width: 50%; 
} 
.gc_footer_button_wrapper { 
    display: table; 
    width: 100%; 
    position: relative; 
    border: 0px solid blue; 
} 
.gc_container { 
    background-color:#ffffff; 
    height: auto; 
    width: 90%; 
    display:table; 
    margin-top:3%; 
    margin-bottom:3%; 
    margin-left:auto; 
    margin-right:auto; 
    position:relative; 
    border:1px solid #D1D1D1; 
    } 
.gc_amount, .gc_subtitle, .gc_terms, .gc_footer { 
    border: 1px solid green; 
    padding: 5px; 
} 

Answer 1

对于应该出现在以同样的方式的元素，我绝不会混合显示，填充和宽度。你一定会惹上麻烦在某些时候... 如果确实需要使用表显示，刚刚成立的一切有“表”显示，使用相同的填充和宽度，像这样：

.gc_amount, .gc_subtitle, .gc_terms, .gc_footer { 
    border: 1px solid green; 
    display:table; 
    width:96%; 
    padding:5px; 
} 

这里的小提琴：http://jsfiddle.net/TdsBZ/11/

但就像我说的，我不会混合这些，并且永远不会使用设置宽度连同填充。利润是你的朋友;我将使用这些.gc_amount，.gc_subtitle，.gc_terms，.gc_footer元素仅用于边框和宽度，并且在这些标签中还有第二个元素以提供额外的样式

这里是另一个小提琴，带有额外的标签en不同的样式： http://jsfiddle.net/TdsBZ/14/