将Divs与不同标题长度对齐可以通过以下几种方法实现:
<div class="container">
<div class="div1">Div 1</div>
<div class="div2">Div 2 with a longer title</div>
<div class="div3">Div 3 with a very long title</div>
</div>
.container {
display: flex;
align-items: center;
justify-content: space-between;
}
.div1, .div2, .div3 {
border: 1px solid black;
padding: 10px;
}
<div class="container">
<div class="div1">Div 1</div>
<div class="div2">Div 2 with a longer title</div>
<div class="div3">Div 3 with a very long title</div>
</div>
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.div1, .div2, .div3 {
border: 1px solid black;
padding: 10px;
}
<div class="container">
<div class="div1">Div 1</div>
<div class="div2">Div 2 with a longer title</div>
<div class="div3">Div 3 with a very long title</div>
</div>
.container {
display: flex;
}
.div1, .div2, .div3 {
border: 1px solid black;
padding: 10px;
}
const divs = document.querySelectorAll('.container > div');
let maxWidth = 0;
divs.forEach(div => {
const titleWidth = div.offsetWidth;
maxWidth = Math.max(maxWidth, titleWidth);
});
divs.forEach(div => {
div.style.width = `${maxWidth}px`;
});
以上是将Divs与不同标题长度对齐的几种方法。具体选择哪种方法取决于具体的需求和布局要求。
领取专属 10元无门槛券
手把手带您无忧上云