0

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

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

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

如果窗口大小低于 200 像素，则只有固定项目可见。

这几乎是我想要的：

http://jsfiddle.net/UsNmU/

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

HTML：

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

CSS：

div {
    height: 50px;
}
#content {
    width: 100%;
}
#content #item1 {
    background: #f00;
    width: 50%;
}
#content #item1 input {
    width: 80%;
}
#content #item2 {
    background: #0f0;
    width: 100px;
    float: right;
}
#content #item3 {
    background: #00f;
    width: 100px;
    float: right;
}

一张图片来说明：

在此处输入图像描述

谢谢。

4

5 回答 5

1

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

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

小提琴链接

如果它的可扩展区域永远不会超过 50%，那么您可以随时将 50% 添加为max-width.

#content #item1 {
    background: #f00;
    position:absolute;
    left:0px;
    right:200px;
    max-width:50%;
}
于 2013-05-29T21:31:46.593 回答
0

如果我正确理解你的问题，我想我有它......

jsFiddle

好吧，我已经全部div向左浮动，而不是向右。这使得绿色和蓝色盒子总是与红色盒子堆叠在一起。我也对你的 sintax 做了修改，把红色div放在其他的前面。

希望这可以帮助！:)

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

于 2013-05-29T21:29:22.457 回答
0

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

http://jsbin.com/agotug/1/edit

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


  <div class="right">right</div>
  <div class="left">left</div>
于 2013-05-29T21:37:24.640 回答
0

为了获得您的图表显示的内容（红色框从容器的 0% 到 50% 之间弯曲，另外两个框是固定宽度并位于红色框旁边）我会将所有内容浮动并使用calc并max-width设置宽度红框的

HTML：

<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>

CSS：

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;
}

jsfiddle：http: //jsfiddle.net/FW4CM/1/

红色框上的calc宽度将其设置为 100% - 200 像素，因为每个固定宽度的框都是 100 像素宽。max-width50% 规则阻止它扩展超过容器宽度的 50% 。

于 2013-05-29T21:37:57.873 回答
-1

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

<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>

CSS：

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%;
    }
}

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

一旦窗口超过 400 像素宽，媒体查询就会开始播放。它强制红色 div 从左边的 0px 到右边的 50%，使其变为 50%。其他两个 div 容器切换到向左浮动，并且有 50% 的边距，因此它位于红色 div 的边缘旁边。

jsfiddle：http: //jsfiddle.net/FW4CM/2/

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

就我个人而言，我更喜欢我的 calc 方法，因为它更简单，即使您决定将元素嵌套在站点的另一部分中也可以工作。但是，如果您针对的是较旧的浏览器，媒体查询确实对它们有更好的支持：媒体查询支持：http ://caniuse.com/#feat=css-mediaqueries calc 支持：http ://caniuse.com/calc

最后我想说 flex-box 可能是解决这个问题的“最佳”方法，但支持不够好，我会在不知道您的确切要求的情况下推荐它。不过可能值得研究。

于 2013-05-29T22:22:44.547 回答