如何调整一行中单元格的大小，使它们的高度相等并且所有字符都适合它们？这是一行现在的样子:
请注意日语栏中的小字符。牢房不够高，无法容纳他们。另外，英文栏中单元格的高度小于其旁边的单元格的高度。
我希望该行看起来像这样:
背景看起来像一个长长的绿色矩形。
这是我的 CSS 和 HTML 代码:
<style type='text/css'>
/* For small screen */
.row :nth-child(even){
background-color: #FFFFFF;
}
.row :nth-child(odd){
background-color: #D0E9C6;
}
/* For medium screen */
@media (min-width: 768px) {
.row :nth-child(4n), .row :nth-child(4n-1) {
background-color: #FFFFFF;
}
.row :nth-child(4n-2), .row :nth-child(4n-3) {
background-color: #D0E9C6;
}
}
/* For large screen */
@media (min-width: 992px) {
.row :nth-child(6n), .row :nth-child(6n-1), .row :nth-child(6n-2) {
background-color: #FFFFFF;
}
.row :nth-child(6n-3), .row :nth-child(6n-4), .row :nth-child(6n-5) {
background-color: #D0E9C6;
}
}
.header, h1 { background-color: #FFFFFF !important}
.en-buffer { margin-top: 10px; margin-right: 10px }
.jp-buffer { margin-top: 10px; margin-left: 10px }
</style>
</head>
<body>
<div class="row">
<div class="col-md-4 col-sm-6 col-xs-12 header jp-buffer"><h1>Japanese</h1></div><div class="col-md-4 col-sm-6 col-xs-12 header en-buffer"><h1>English</h1></div>
</div>
<div class="row">
<div class="col-md-4 col-sm-6 col-xs-12 japanese jp-buffer"><ruby lang="jp">カレー</ruby><ruby lang="jp">粉<rp>(</rp><rt>こ</rt><rp>)</rp>は</ruby><ruby lang="jp">家<rp>(</rp><rt>いえ</rt><rp>)</rp>にあるの?</ruby></div><div class="col-md-4 col-sm-6 col-xs-12 english en-buffer">Do you have curry powder at your house?</div>
</div>
最佳答案
我认为问题出在类 .en-buffer 和 .jp-buffer
尝试使用填充代替边距...
/* For small screen */
.row:nth-child(even) {
background-color: #FFFFFF;
}
.row:nth-child(odd) {
background-color: #D0E9C6;
}
/* For medium screen */
@media (min-width: 768px) {
.row:nth-child(4n),
.row:nth-child(4n-1) {
background-color: #FFFFFF;
}
.row:nth-child(4n-2),
.row:nth-child(4n-3) {
background-color: #D0E9C6;
}
}
/* For large screen */
@media (min-width: 992px) {
.row:nth-child(6n),
.row:nth-child(6n-1),
.row:nth-child(6n-2) {
background-color: #FFFFFF;
}
.row:nth-child(6n-3),
.row:nth-child(6n-4),
.row:nth-child(6n-5) {
background-color: #D0E9C6;
}
}
.header,
h1 {
background-color: #FFFFFF !important
}
.en-buffer {
padding: 10px;
}
.jp-buffer {
padding: 10px;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-md-4 col-sm-6 col-xs-6 header ">
<h1>Japanese</h1>
</div>
<div class="col-md-4 col-sm-6 col-xs-6 header ">
<h1>English</h1>
</div>
</div>
<div class="row">
<div class="col-md-4 col-sm-6 col-xs-6 jp-buffer ">
<ruby lang="jp">カレー</ruby>
<ruby lang="jp">粉
<rp>(</rp>
<rt>こ</rt>
<rp>)</rp>は</ruby>
<ruby lang="jp">家
<rp>(</rp>
<rt>いえ</rt>
<rp>)</rp>にあるの?</ruby>
</div>
<div class="col-md-4 col-sm-6 col-xs-6 en-buffer">Do you have curry powder at your house?</div>
</div>关于html - Bootstrap 3 : Adjust size of cells in div row，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35120312/