Question

在我的应用中，我有三个<div>容器：左，中，右容器。它们都向左浮动，除非调整窗口大小或浏览器中的可用宽度较小，否则一切都很好。

左侧和右侧容器需要保持相同(width 117px)，而中间容器需要更改为具有不同屏幕分辨率或窗口大小更改的容器。问题是浏览器将左侧或右侧容器移开 - 中间容器的上方或下方 - 在窗口变小之前调整中间容器的大小。如何强制页面不移动左右容器并调整中间容器的大小？内联CSS现在只是用于调整。有没有一个简单的CSS技巧来实现这一点，还是我需要使用JS / jQuery来实现这一目标？

        <div style="width:100%;">
          <div style="background:url('image.png') no-repeat;width:117px;height:36px;float:left;">
          </div>
          <div style="border:1px solid white;height:36px;width:100%;min-width:490px;max-width:1364px;float:left;">
          </div>
          <div style="background:url('image.png') no-repeat;width:117px;height:36px;float:left;">
          </div>
          <br style="clear:both;">
        </div>

Answer 1

一种解决方案是使用表格：http://jsfiddle.net/e5gfbsu0/。

HTML：

<div class = "container">
    <div class = "left">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam congue, nulla sit amet placerat molestie, quam urna mollis eros, eget pellentesque tellus nisi sit amet ligula.
    </div>
    <div class = "middle">
        MIDDLE
    </div>
    <div class = "right">
        Mauris dapibus bibendum luctus. Nulla finibus nulla eu felis dignissim blandit.
    </div>
</div>

CSS：

.container {
    display: table;
    width: 100%;
    outline: 1px solid gray;
}

.container > .left,
.container > .right {
    display: table-cell;
    width: 117px;
    border: 1px dotted gray;
}

.container > .middle {
    display: table-cell;
    border: 1px dotted red;
}

另一种解决方案是使用flexbox：http://jsfiddle.net/xrqyxnzg/。

CSS：

.container {
    display: flex;
}

.container > .left,
.container > .right {
    flex: 0 0 117px;
    border: 1px dotted gray;
}

.container > .middle {
    flex: 1 1 auto;
    border: 1px dotted red;
}

并且，第三个（不太理想的）解决方案将每个方框视为inline-block：http://jsfiddle.net/f64vj6dm/。

HTML :(更改为消除空格[即返回]）

<div class = "container"><div class = "left">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam congue, nulla sit amet placerat molestie, quam urna mollis eros, eget pellentesque tellus nisi sit amet ligula.
    </div><div class = "middle">
        MIDDLE
    </div><div class = "right">
        Mauris dapibus bibendum luctus. Nulla finibus nulla eu felis dignissim blandit.
    </div>
</div>

CSS：

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;    
}

.container {
    white-space: nowrap;
}

.container > .left,
.container > .right {
    border: 1px dotted gray;
    width: 117px;
    display: inline-block;
    white-space: normal;
    vertical-align: top;
}

.container > .middle {
    display: inline-block;
    vertical-align: top;
    border: 1px solid red;
    width: calc(100% - 117px * 2);
}

你如何在另外两个人之间调整容器的大小？

1 个答案: