我有3列(类似于twitter)。左列需要保持最小宽度为312像素,中间列将设置为最大650像素,并且在调整屏幕大小时可以正常工作。 (即:宽度会根据需要折叠),右列将与左列相同,并保持最小312像素宽度。我想将左侧col浮动到左侧,将右侧col浮动到右侧,并将中心col设置为100%宽度。能做到吗?
中间一栏中的文本框是唯一接收用户输入的文本框。
总而言之,中心将减小宽度,左右将保持最小宽度。
需要参考的布局图像
答案 0 :(得分:0)
如果我正确理解您的要求,则可以通过多种方式来实现。一种方法是通过CSS flex-box。
考虑以下HTML和CSS,以了解如何定义所需布局的基础:
HTML:
<div class="row">
<div class="left">
Left side content
</div>
<div class="center">
Center content
</div>
<div class="right">
Right side content
</div>
</div>
CSS:
body {
text-align:center;
}
.row {
display:flex;
flex-direction:row;
justify-content: space-between;
}
.left, .right {
width:312px; // Target width for left/right content columns
min-width:312px; // Minimum allowed width for left/right content columns
}
.left {
background:red; // Colouring to help with visualising layout boundaries
}
.center {
width:650px; // Target width for center content column
background:yellow; // Colouring to help with visualising layout boundaries
}
.right {
background:green; // Colouring to help with visualising layout boundaries
}
答案 1 :(得分:0)
如果您被锁定在Bootstrap 4中,则可以通过Bootstrap 4提供的flex utility classes实现此布局。
您可能仍需要根据需要的尺寸提供一些自定义CSS。参见下面的代码:
HTML:
<!-- reuse flex classes provided by boostrap 4 -->
<div class="d-flex flex-row justify-content-between">
<div class="left">
Left side content
</div>
<div class="center">
Center content
</div>
<div class="right">
Right side content
</div>
</div>
CSS:
.left, .right {
width:312px; // Target width for left/right content columns
min-width:312px; // Minimum allowed width for left/right content columns
}
.left {
background:red; // Colouring to help with visualising layout boundaries
}
.center {
width:650px; // Target width for center content column
background:yellow; // Colouring to help with visualising layout boundaries
}
.right {
background:green; // Colouring to help with visualising layout boundaries
}