Html CSS：如何使父div中的两个div与父div的宽度减小 .parent{ 最大宽度：750px； 高度：100px； 背景色：红色； 保证金：0； 填充：0； } .区块1{ 宽度：100px； 身高：100%； 浮动：左； 背景色：黑色； } .区块2{ 宽度：650px； 身高：100%； 浮动：左； 背景色：黑色； }

我希望

.block2

变小，因为

.parent

变小<代码>最大宽度：650px由于某些原因不起作用。当浏览器变小时，

.block2

转到另一行，而不是我希望它保持最大大小

我已经在JSFiddle中使用

的.block2

上的

max width:650px

测试了您的代码，它似乎可以正常工作

---

这里的问题是，第二个区块的宽度是固定的，一旦两个区块在一行中停止拟合，它们就会断裂

如果要使用浮动，可以使用

calc（）

css函数计算父对象的

100%

宽度减去第一个块的

100px

。在第二个块中保留以下属性：

.parent {
    max-width: 750px;
    height: 100px;
    background-color: red;
    margin: 0;
    padding: 0;
}
.block1 {
    width: 100px;
    height: 100%;
    float: left;
    background-color: black;
}
.block2 {
    width: 650px;
    height: 100%;
    float: left;
    background-color: black;
}

<div class="parent">
    <div class="block1"></div><div class="block2"></div>
</div>

---

---

代码片段：

.parent{
//最大宽度：750px；
高度：100px；
背景色：番茄；
保证金：0；
填充：0；
}
.区块1{
宽度：100px；
身高：100%；
浮动：左；
背景颜色：紫色；
}
.区块2{
宽度：计算（100%-100px）；
最大宽度：650px；
身高：100%；
浮动：左；
背景色：淡蓝色；
}

1。）如果要在两个宽度之间保持固定关系，请使用百分比值作为其

宽度设置：


100px=100/750*750px的100%=13.3333%
650px=650/750*100
750px的百分比=86.6666%

2.）或者，如果100px应保持固定且第二个div应收缩，则在第二个div上使用此设置：

width: calc(100% - 100px);

flex
像这样的肌肉：

width: calc(100% - 100px);

请参见下面的代码片段：


.flex{
显示器：flex；
}
.柔性块{
弹性：1；
}
溴{
明确：两者皆有；
}
.家长{
最大宽度：750px；
高度：100px；
背景色：红色；
保证金：0；
填充：0；
}
.区块1{
宽度：100px；
身高：100%；
浮动：左；
背景色：黑色；
}
.区块2{
宽度：650px；
身高：100%；
浮动：左；
背景色：黑色；
}



使用flex…
如果您不想使用“flexbox”，也不想使用“calc”，那么有一种技术可以使用“边距”来解决您的问题。如果您只希望block2和父块具有灵活性，这将起作用


我在下面添加了一个示例：


.parent{
最大宽度：500px；
高度：100px；
背景色：红色；
保证金：0；
填充：0；
}
.区块1{
宽度：100px；
身高：100%；
浮动：左；
背景颜色：蓝色；
}
.区块2{
左边距：100px；
身高：100%；
背景色：红色；
}

欢迎来到SO。这是一个评论，不是答案。这不是一个正确的解决方案，对我来说，左边的方块是黑色的，其余的是红色的。如果它工作，它应该显示一个完整的黑色块。但是第二个区块消失了，他说只有他的第二个区块应该按照其父区块的宽度缩小。你的第一点没有帮助，你的第二点已经包含在我的答案中。
.flex {
    display: flex;
}
.flex-block {
    flex: 1 1;
}