我已经使用Flexbox并排对齐了两个div，我希望两个div中的文本以相同的级别被推到div的底部，但是在各个文本下面似乎有不同的间距。
.wrapper {
display: flex;
flex-direction: row;
}
.block1 {
font-weight: bold;
font-size: 2em;
color: red;
border: 1px solid;
display: flex;
align-items: flex-end;
}
.block2 {
font-size: 1em;
color: grey;
border: 1px solid;
display: flex;
align-items: flex-end;
}
.block1.hack-fix {
line-height: 29px; /* HACK */
}<h2>Current:</h2>
<div class="wrapper">
<span class="block1">
23
</span>
<span class="block2">
Quote
</span>
</div>
<hr/>
<h2>Needed:</h2>
<div class="wrapper">
<span class="block1 hack-fix">
23
</span>
<span class="block2">
Quote
</span>
</div>
感谢您的帮助！
答案 0 :(得分：3)
您正在寻找的内容称为基线对齐。
要在flexbox中使用var ticketAmount_ = document.getElementById("ticketAmount");
var options = ["1", "2", "3", "4"];
for (var i = 0; i < options.length; i++) {
var opt = options [i];
var element = document.createElement("option");
element.textContent = opt;
element.value = opt;
ticketAmount_.appendChild(element);
;
}
var movieName = function() {
document.getElementById('movieName').options.length = 0;
if (document.getElementById("ticketAmount").value == 1) {
var movieSelection1 = document.getElementById("movieName");
var options = ["A", "B", "C", "D"];
for (var i = 0; i < options.length; i++) {
var opt = options [i];
var element = document.createElement("option");
element.textContent = opt;
element.value = opt;
movieSelection1.appendChild(element);
}
}
else if
(document.getElementById("ticketAmount").value == 2) {
var movieSelection2 = document.getElementById("movieName");
var options = ["E", "F", "G", "H"];
for (var i = 0; i < options.length; i++) {
var opt = options [i];
var element = document.createElement("option");
element.textContent = opt;
element.value = opt;
movieSelection2.appendChild(element);
;
}
}
};
实现此目的。
以下是一个更完整的解释：
align-items: baseline.wrapper {
display: flex;
flex-direction: row;
align-items: baseline; /* NEW */
}
.block1 {
font-weight: bold;
font-size: 2em;
color: red;
}
.block2 {
font-size: 1em;
color: grey;
}
答案 1 :(得分：0)
父母：
display: flex;
儿童：
flex: 1;