布局可以通过使用CSS的flexbox或者grid布局来实现。
<div class="container">
<div class="left">Left Content</div>
<div class="middle">Middle Content</div>
<div class="right">Right Content</div>
</div>
CSS代码:
.container {
display: flex;
}
.left {
flex: 0 0 200px; /* 左侧固定宽度 */
}
.middle {
flex: 1; /* 中间自适应宽度 */
}
.right {
flex: 0 0 300px; /* 右侧固定宽度 */
}
推荐的腾讯云相关产品:腾讯云云服务器(https://cloud.tencent.com/product/cvm)
<div class="container">
<div class="left">Left Content</div>
<div class="middle">Middle Content</div>
<div class="right">Right Content</div>
</div>
CSS代码:
.container {
display: grid;
grid-template-columns: 200px 1fr 300px; /* 左中右三列的宽度比例 */
}
.left {
/* 左侧固定宽度 */
}
.middle {
/* 中间自适应宽度 */
}
.right {
/* 右侧固定宽度 */
}
推荐的腾讯云相关产品:腾讯云云服务器(https://cloud.tencent.com/product/cvm)
以上是实现三个宽度不同的div并排,左右固定的布局的方法,可以根据具体需求选择使用flexbox布局或grid布局。
领取专属 10元无门槛券
手把手带您无忧上云