固定宽度div旁边的灵活宽度div

Question

今天我面临着一个充满挑战的局面（至少对我而言）。

实际上我必须在父div中使一些div灵活，并将另一个固定div作为'兄弟'。根据父母的宽度，这些灵活的div必须是100％。

在这里你会拍一张照片来解释我的情况：

我在想这样的事情：

.parent {
  width: 500px; /* this value can change any time */
  padding: 10px;
  border: 1px solid red;
  float: left;
}

.parent div {
    float: left;
    border: 1px solid #ccc;
}

.fixed {
  width: 100px;
  height: 100px;
  background: #ccc;
  
}

.flexible {
  width: calc(100% - 100px); /*  IT IS NOT WORKING AS I WOULD LIKE  */
} 

<div class='parent'>
  <div class='fixed'>*fixed</div>
  <div class='flexible'>*flexible 1</div>
  <div class='flexible'>*flexible 2</div>
</div>

有人可以帮助我吗？

由于

Answer 1

以您的代码为基础，您可以将left和margin-left添加到.flexible。同时更改width，以便计算填充和容器。

.flexible {
  left: 0;
  margin-left: 10px;
  width: calc(100% - 120px); /*  IT IS NOT WORKING AS I WOULD LIKE  */
} 

Answer 2

您可以使用flexbox来实现此布局。

＆＃13;

＆＃13;

prix = {"qty":"2","amount":"1276 UAH"}

＆＃13;

.parent {
  display: inline-flex;     /* 1 */
  padding: 10px;
  border: 1px solid red;
}

.sub-container {            /* 2 */
  display: flex;
  flex-direction: column;
  align-items: stretch;     /* 3 */
}

.flexible {
  flex: 1;                  /* 4 */
  border: 1px solid black;
}

.sub-container > div + div {
  margin-top: 5px;
}

.fixed {
  width: 100px;
  height: 100px;
  background: #ccc;
}

＆＃13;

＆＃13;

＆＃13;

注意：

1. 内联级灵活容器。 （它调整到其内容的宽度。）
2. 为灵活div创建子容器。还使用flex属性。
3. 弹性容器的初始设置为<div class='parent'> <div class='fixed'>*fixed</div> <div class='sub-container'> <div class='flexible'>*flexible 1</div> <div class='flexible'>*flexible 2 *flexible 2 *flexible 2</div> </div> </div>。这意味着弹性项目将自动扩展以覆盖cross axis的全长。在这种情况下，这就是宽度。
4. 在两个弹性项目之间均匀分布容器中的垂直空间。

Answer 3

您可以使用flexbox。你应该将两个灵活的div包装在一个容器中，以便它们堆叠起来。然后，您可以将父级设置为<?xml version="1.0" encoding="utf-8"?> <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/main_content" android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.design.widget.AppBarLayout android:id="@+id/appbar" android:layout_width="match_parent" android:layout_height="wrap_content" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="wrap_content" android:elevation="4dp" android:background="?attr/colorPrimary" /> </android.support.design.widget.AppBarLayout> 。然后将灵活的包装设置为display: flex; flex-direction: row;并在灵活的div和灵活的包装上设置display: flex; flex-direction: column;，以便它们展开以填充垂直和水平空间。

＆＃13;

＆＃13;

flex-grow: 1

＆＃13;

.parent {
  width: 500px;
  padding: 10px;
  border: 1px solid red;
  display: flex;
  flex-direction: row;
}

.parent div {
  border: 1px solid #ccc;
}

.flexcontainer {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.fixed {
  width: 100px;
  height: 100px;
  background: #ccc;
}

.flexible {
  flex-grow: 1;
}

＆＃13;

＆＃13;

＆＃13;