在HTML/CSS中创建具有固定大小对象的可扩展对象

我正在尝试用HTML/CSS（仅限！）创建一个可扩展区域

在容器上，此可扩展区域的宽度可以在0到50%之间变化。容器的宽度可以从0到100%（窗口大小）不等

我有两个项目，应该停留在红色项目的右侧，每个100像素

如果窗口大小小于200px，则只有固定的项目可见

这几乎就是我想要的：

问题是，蓝色和绿色的物体保持在右边，我希望它们在红色物体的右边，卡住了。 这些物品必须保持在一起（蓝色右边的绿色）

HTML:

要说明的图像：

---

谢谢。

如果我正确理解了你的问题，我想我已经知道了

嗯，我将所有

div

浮动到左侧，而不是右侧。这使得绿色和蓝色的盒子总是和红色的盒子叠在一起。我也对您的sintax进行了更改，将红色的

div

放在其他的前面

希望这有帮助！：）

---

编辑：哦，我忘了“蓝色右边的绿色”。在这种情况下，我建议我们可以再次更改标记，将绿色的

div

放在蓝色的前面。

我的建议是删除项目1的50%宽度，并使用绝对定位设置左右偏移

#content #item1 {
    background: #f00;
    position:absolute;
    left:0px;
    right:200px;
}

如果扩展区域永远不会大于50%，那么您可以始终将50%添加回

最大宽度

#content #item1 {
    background: #f00;
    position:absolute;
    left:0px;
    right:200px;
    max-width:50%;
}

---

尝试浮动左侧并隐藏右侧溢出：

。对{
最大宽度：50%；
浮动：左；
边框：实心；
}
.左{
溢出：隐藏；
边框：实心；
}
正确的
左边

为了得到您的图表所显示的内容（红色框从容器的0%到50%之间弯曲，其他两个框的宽度是固定的，并且位于红色框旁边），我将浮动所有剩余的内容，并使用

calc

和

max width

设置红色框的宽度

HTML:

jsfiddle：

---

红色框上的

calc

宽度将其设置为100%-200px，因为每个固定宽度框的宽度为100px。

max width

50%规则阻止它扩展到容器宽度的50%以上。

另一种方法是使用媒体查询。 HTML:

它使用绝对定位来设置红色div的左侧和右侧。这意味着div将扩展以适应这两个坐标之间的大小。默认情况下，css告诉它从容器左边缘的0px拉伸到容器右边缘的200px。当窗口小于等于400px且固定宽度元素需要强制缩小红色div时，这将为您提供收缩大小。固定宽度div位于刚刚向右浮动的div中

当窗口宽度超过400px时，媒体查询将开始播放。它强制红色div从左侧的0px in变为右侧的50%，使其为50%。另外两个div容器切换到浮动左侧，其边距为50%，因此它位于红色div的边缘旁边

jsfiddle：

注意，这种方式涉及另一个容器中的包装器div 2和3。这是因为我通过媒体查询从左到右切换浮动，如果我直接将其应用于它们，它们将被切换（因此3将显示在2之前）

就我个人而言，我更喜欢我的计算方法，因为它更简单，即使您决定将元素嵌套在站点的另一部分，它也能工作。但是，如果您针对的是较旧的浏览器，则媒体查询确实对它们有更好的支持： 媒体查询支持： 计算支持：

---

最后，我想说flex box可能是实现这一点的“最佳”方式，但支持还不够好，因此我建议您在不了解确切需求的情况下使用它。不过可能值得一看。

这里的问题是，绿色和蓝色物体都在下面。我希望它们保持在红色物体的右边。哦，我明白了，你想把红色物体压缩到最大可能。。。我会尝试：）有更简单的方法来获得100%-200px，而不使用css属性，这在30%的浏览器中不受支持。是的，有，比如在块元素上设置宽度100%（默认值，这样就不必实际写入），并添加右边距：200px。然而，考虑到要求，它只会填满空间，直到达到容器的50%，问题不能归结为“什么是获得100%-200px的方法”。这似乎没有满足他的要求。在您的示例中，左框在添加内容时弯曲，而不是在窗口扩展时弯曲。当他要求他们有一个固定的尺寸时，右边的盒子已经填满了剩余的空间。这很酷，我不知道如果设置了左和右，最大宽度仍然有效。这仍然没有考虑到问题要求固定宽度的框始终粘在柔性红框的一侧，即使柔性框不再填满所有可用空间。将“最大宽度”（max width）添加回本例，然后展开窗口，会显示小框仍然向右浮动，并且它们与柔性框之间会出现间隙。这不是要求的答案，但似乎这个答案被标记为正确的，也许用户根本不需要这个答案…这不是我最初理解这个问题的方式，但现在再看一看，你的解释确实更有意义。为了实现这一点，我想我应该在content div中添加

max width

，同时添加200px的填充（左或右），为第2项和第3项提供额外的空间。然后你就可以相对content div对所有内容进行绝对定位。但是OP似乎对当前的解决方案很满意，所以也许我最初的解释是正确的，或者至少足够好。

#content #item1 {
    background: #f00;
    position:absolute;
    left:0px;
    right:200px;
}

#content #item1 {
    background: #f00;
    position:absolute;
    left:0px;
    right:200px;
    max-width:50%;
}

.right {
  max-width:50%;
  float:left;
  border:solid;
}
.left {
  overflow:hidden;
  border:solid;
}


  <div class="right">right</div>
  <div class="left">left</div>

<div id="content">
    <div id="item1">
        <form>
            <input type="text" />
            <br />
            <input type="text" />
        </form>
    </div>
    <div id="item2"></div>
    <div id="item3"></div>

</div>

div {
    height: 50px;
}
#content {
    width: 100%;
}
#content #item1 {
    background: #f00;
    width: -webkit-calc(100% - 200px);
    width: -moz-calc(100% - 200px);
    width: calc(100% - 200px);
    max-width:50%;
    float:left;
}
#content #item1 input {
    width: 80%;
}
#content #item2 {
    background: #0f0;
    width: 100px;
    float: left;
}
#content #item3 {
    background: #00f;
    width: 100px;
    float: left;
}

<div id="content">
    <div id="item1">
        <form>
            <input type="text" />
            <br />
            <input type="text" />
        </form>
    </div>
    <div class="extra_container">
        <div id="item2"></div>
        <div id="item3"></div>
    </div>    
</div>

div {
    height: 50px;
}
#content {
    width: 100%;
  position:relative;
}
#content #item1 {
    background: #f00;
    position:absolute;
    width:auto;
    left:0;
    right:200px;
}
#content #item1 input {
    width: 80%;
}
.extra_container{
    float:right;
}
#content #item2 {
    background: #0f0;
    width: 100px;
    float: right;
}
#content #item3 {
    background: #00f;
    width: 100px;
    float: right;
}

@media (min-width: 401px){
    #content #item1{
        right:50%;
    }
    .extra_container{
        float:left;
        margin-left:50%;
    }
}