16

我div在另一个里面有 3 个街区div。

我想做的是将它们内联，但前 2div个块应根据其内容占用宽度，最后一个块div占用剩余空间。

<div class="container">
    <div class="red">Red</div>
    <div class="green">Green</div>
    <div class="blue">Blue</div>
</div>

我尽量避免使用固定宽度，因为我需要在响应式设计中使用它。

我怎样才能让这个小提琴div中的蓝色占据其父级的剩余可用空间并在调整屏幕大小时做出响应？

4

6 回答 6

11

float: left红绿蓝得到width: clac(100% - 100px)

.blue {
    width: calc(100% - 100px);
}

http://jsfiddle.net/6kLVn/190/

于 2016-08-03T21:49:42.197 回答
8

我相信，如果您根本不想指定任何像素或百分比宽度并使红色和绿色容器仅与其内容一样宽，则需要将它们包装在自己的容器中，.left如下所示：

<div class="container">
    <div class="left">
        <div class="red">Red</div>
        <div class="green">green</div>
    </div>
    <div class="blue">blue</div>
</div>

如果您现在.left向左浮动，并且还向左浮动.left div，您现在不再需要指定任何 inline-block 元素。蓝色容器只会占用可用空间，直到.container.

.left {
    float: left;
}

.left div {
    float: left;
}

小提琴

编辑

愚蠢的我，.left只要你只是添加float: left到你的红色和绿色块中，显然不需要容器，就像@Ennui 上面在评论中所说的那样:)

更新的小提琴

于 2013-07-30T19:39:44.003 回答
2

将您的 CSS 更改为：

.container{border: 2px solid black; padding: 5px; position: relative; width: 100%;}

.container div {height: 20px;}

.red{border: 2px solid red; display: block; float: left;}

.green{border: 2px solid green; display: block; float: left;}

.blue{border: 2px solid blue;}

在 Chrome 中测试

编辑

傻我，这是分叉的jsfiddle：http: //jsfiddle.net/BWRVk/

于 2013-07-30T19:33:45.353 回答
1

如果您希望它响应，请给出divs% widths。

http://jsfiddle.net/feitla/6kLVn/6/

.container div {height: 20px;}

.red{border: 2px solid red;width:10%;display:inline;}

.green{border: 2px solid green;width:10%; display: inline;}

.blue{border: 2px solid blue;display:inline-block;width:80%;}
于 2013-07-30T19:35:04.327 回答
1

我想这一切都取决于你想要你的图像是什么。我只是在图像上使用 % 来显示它们可以根据响应式设计调整大小。http://jsfiddle.net/6kLVn/7/

HTML

<div class="container">
    <div class="red">Red</div>
    <div class="green">green</div>
    <div class="blue">blue</div>
</div>

CSS

.container{border: 2px solid black; padding: 5px; position: relative; margin:0px; width: 100%;}

.container div {height: 20px; display: inline-block; padding:0px; margin:0px;}

.red{border: 2px solid red; width:31%; }

.green{border: 2px solid green;width:31%;}

.blue{border: 2px solid blue;width:31%;}
于 2013-07-30T19:35:12.990 回答
0

给容器display: flex，每div flex: 1一个div都给它flex-shrink: 1; width: 100%

这里的例子 - http://jsfiddle.net/wtsn3uzh/

于 2021-06-29T19:41:35.147 回答