问题:
在我的 fiddle 中，您可以看到最后一个框(带有日期和按钮)与其他框的大小不同。此框应分为两个，每个宽度为 50%。
在左侧，我希望日期容器相对于其父框为 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;
}
最佳答案
对于应该以相同方式出现的元素，我绝不会混用显示、填充和宽度。你一定会在某个时候遇到麻烦...... 如果您确实需要使用表格显示，只需将所有内容设置为具有“表格”显示，具有相同的填充和宽度，如下所示:
.gc_amount, .gc_subtitle, .gc_terms, .gc_footer {
border: 1px solid green;
display:table;
width:96%;
padding:5px;
}
这是 fiddle :http://jsfiddle.net/TdsBZ/11/
但正如我所说，我不会将它们混合使用，也绝不会将设置的宽度与内边距一起使用。边距是你的 friend ；我会将这些 .gc_amount、.gc_subtitle、.gc_terms、.gc_footer 元素仅用于边框和宽度，并在这些标签中使用第二个元素来提供额外的样式
这是另一个 fiddle ，带有不同样式的额外标签:http://jsfiddle.net/TdsBZ/14/
关于css - 具有百分比宽度的元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21773794/