Question

所以，我有一个固定的宽度div应该放在页面的中间位置，但在它之前和之后在它之后，我应该有从页面边缘到边缘的自动宽度div，如下所示：

<div class="left">Content goes from left edge of screen to center div</div>
<div class="center">Fixed width div that is always centered</div>
<div class="right">Content goes from center div to right edge of screen</div>

https://jsfiddle.net/hww17nzL/2/ 有关如何做到这一点的任何建议吗？

Answer 1

在容器元素上使用Flexbox。

＆＃13;

.container {
  display: flex;
  justify-content: space-between;
}
.center {
  flex: 0 0 300px;
}

＆＃13;

<div class="container">
  <div>Content goes from left edge of screen to center div</div>
  <div class="center">Fixed width div that is always centered</div>
  <div>Content goes from center div to right edge of screen</div>
</div>

＆＃13;

Answer 2

有很多方法可以做到这一点。你可以使用display:table-cell 没有你的任何具体要求...我不能说哪个最适合你使用

让我知道这是否适合您

请参阅代码段或＆gt; jsfiddle

＆＃13;

.center {
    width:300px;
    text-align:center;

    
}
.left {

}
.right {

}
div {
  display:table-cell;
}

＆＃13;

<div class="left">Content goes from left edge of screen to center div</div>
<div class="center">Fixed width div that is always centered</div>
<div class="right">Content goes from center div to right edge of screen</div>

＆＃13;

一个固定宽度居中div，两个汽车侧面

2 个答案: