Question

问题：

在我的小提琴中，您可以看到最后一个框（有日期和按钮）与其他框的大小不同。此框应分为两个，每个框宽度为50％。
在左侧，我希望日期容器相对于其父框为50％
在右侧，我希望按钮容器相对于其父框
按钮应相对于容器对齐。

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元素用于边框和宽度，并在这些标记中使用第二个元素来提供额外的样式

这是另一个小提琴，额外的标签具有不同的造型：http://jsfiddle.net/TdsBZ/14/

宽度百分比的元素

1 个答案: