元素與百分比寬度

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/