Question

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

我希望.block2越小，.parent越小。 max-width: 650px;由于某种原因无效。当浏览器变为小.block2进入另一条线而不是然后我希望它只是保持最大尺寸。

Answer 1

flex那些肌肉如此：

.flex {
    display: flex;
}
.flex-block {
    flex: 1 1;
}

请参阅下面的代码段：

＆＃13;

.flex {
    display: flex;
}
.flex-block {
    flex: 1 1;
}
br {
    clear: both;
}
.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;
}

＆＃13;

<div class="parent">
    <div class="block1"></div><div class="block2"></div>
</div>
<br>
<strong>with flex...</strong>
<div class="parent flex">
    <div class="block1 flex-block"></div><div class="block2 flex-block"></div>
</div>

＆＃13;

对flex的跨浏览器支持：

Answer 2

这里的问题是你的第二个区块有一个固定的宽度，一旦两个区块在一行中停止装配就会中断。

如果要使用浮点数，可以使用calc() css函数计算父级的100%宽度减去第一个区块的100px。在第二个区块中留下以下属性：

width: calc(100% - 100px);

<强> jsfiddle

CODE SNIPPET

＆＃13;

.parent {
  //max-width: 750px;
  height: 100px;
  background-color: tomato;
  margin: 0;
  padding: 0;
}
.block1 {
  width: 100px;
  height: 100%;
  float: left;
  background-color: purple;
}
.block2 {
  width: calc(100% - 100px);
  max-width: 650px;
  height: 100%;
  float: left;
  background-color: dodgerblue;
}

＆＃13;

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

＆＃13;

或者，您可以摆脱浮动并使用flexbox。

<强> jsfiddle

＆＃13;

.parent {
  //max-width: 750px;
  height: 100px;
  background-color: tomato;
  margin: 0;
  padding: 0;
  display: flex;
}
.block1 {
  flex: 0 0 100px;
  height: 100%;
  background-color: purple;
}
.block2 {
  flex-grow: 1;
  max-width: 650px;
  height: 100%;
  background-color: dodgerblue;
}

＆＃13;

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

＆＃13;

更多信息：flexbox here。

Answer 3

1。）如果您想在两个宽度之间保持固定关系，请使用其width设置的百分比值：

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

2。）或者，如果100px应保持固定而第二个div应缩小，请在第二个DIV上使用此设置：

width: calc(100% - 100px);

Answer 4

如果您不想使用'flexbox'并且既不想使用'calc'，那么有一种技术可以使用'margin'来解决您的问题。如果您只希望block2和父块灵活，这将起作用。

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

bool increasing(int arr[], int& advance, int n, int& x)
{   assert(advance < n-1);
    x = 0;
    bool doesIncrease = arr[advance] < arr[advance + 1];
    bool isStable = arr[advance] == arr[advance + 1];
    if (doesIncrease) {
      for (int i = advance+1; i < n - 1; i++)
      {
          if (arr[i] < arr[i + 1])
          {
              x++;
          }
      }
    }
    else if (isStable) {
       ...
    }
    else { // decreasing
      for (int i = advance+1; i < n - 1; i++)
      {
          if (arr[i] > arr[i + 1])
          {
              x++;
          }
      }
    };
  return doesIncrease;
}

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

在块2中，我添加了包含块1宽度的边距。我还删除了块2上的“浮动”部分。

Answer 5

我在JSFiddle的max-width: 650px上使用.block2测试了您的代码，它似乎正常运行。

Check out the Fiddle here

CSS：如何在父div中使两个div在父级中减小宽度

5 个答案: