Question

我有两个坐在彼此旁边的div，一个漂浮在左边，一个漂浮在右边。

在左侧浮动的div中，我有另外三个嵌套的div。

我希望嵌套的div调整它们的宽度，以占用右浮动div剩余的可用空间。

我怎样才能让这种魔力发生？

请参阅此处的codepen示例：https://github.com/ethz-asl/kalibr

这是HTML：

/* Maximum width of container */
.outer {
  width: 1000px;
}

/* Floats div container to the left */
.inner-left {
  float: left;
  display: inline-block;
}

/* Floats div container to the right */
.inner-right {
  float: right;
  width: initial;
  display: inline-block;
  border: 5px solid blue;
}

/* ??? helpe me position these equally in available space ??? */
.item {
  width: 30%; /* This is wrong because they don't adjust to fill the space next to the blue "inner-right" content*/
  text-align: center;
  display: inline-block;
  border: 5px solid red;
}

这是CSS：

function set_globals(table){
    // Setup Local Storage
    setLocalStorage();

    // DEBUGGING
    debug = AC.debug;
    debug == true ? console.log('Debugging is on.') : console.log('Debugging is off.');

    // URL
    current_url = window.location.protocol + "//" + window.location.host + window.location.pathname;

    // PAGINATION
    page_data   = {
        "_token": $('meta[name="csrf-token"]').attr('content'),
    };
    paginate    = true;
    pagination  = {};
    setPaginationData(table.pagination, table.config.table.id)

    // TABLE
    table_restore   = true;
    // SEARCH
    searched        = false;
    //Downloading
    downloadingData = false;
}

Answer 1

你可以使用display：flex ..设置内左类的display: flex。

/* Maximum width of container */
.outer {
  width: 1000px;
}

/* Floats div container to the left */
.inner-left {
  float: left;
  display: flex;
}

/* Floats div container to the right */
.inner-right {
  float: right;
  width: initial;
  border: 5px solid blue;
}

/* ??? helpe me position these equally in available space ??? */
.item {
   /* This is wrong because they don't adjust to fill the space next to the blue "inner-right" content*/
  text-align: center;
  display: inline-block;
  border: 5px solid red;
}

<div class="outer">
  <div class="inner-left">
    <div class="item">Image and text here. I want all three of these to sit next too each other. But their width should adjust too fill the available space next to the blue "inner-right" content.</div>
    <div class="item">Image and text here. I want all three of these to sit next too each other. But their width should adjust too fill the available space next to the blue "inner-right" content.</div>
    <div class="item">Image and text here. I want all three of these to sit next too each other. But their width should adjust too fill the available space next to the blue "inner-right" content</div>
  </div>
  <div class="inner-right">
    Some other divs and tables go in here. The width of this part will exapand based on the dynamic content it contains.
  </div>
</div>

Answer 2

或者，你可以使用CSS calc()函数和max-width属性来确定最大宽度，这里的pickle就是你的边框，这占用了太多的空间。

/* Maximum width of container */
.outer {
  width: 1000px;
}

/* Floats div container to the left */
.inner-left {
  float: left;
  display: inline-block;
  max-width: 75%
}

/* Floats div container to the right */
.inner-right {
  float: left;
  max-width: calc(25% - 10px);
  display: inline-block;
  border: 5px solid blue;
}

/* ??? helpe me position these equally in available space ??? */
.item {
  width: calc(33% - 10px); /* This is wrong because they don't adjust to fill the space next to the blue "inner-right" content*/
  text-align: center;
  display: inline-block;
  border: 5px solid red;
}

More info on calc() More info on max-width

Answer 3

这是表格的少数合法用例之一。它支持旧浏览器（仅限Flexbox IE10），并且完全是动态的。

＆＃13;

/* Maximum width of container */
.outer {
  width: 1000px;
  display:table;
}

/* Floats div container to the left */
.inner-left {
  vertical-align: -webkit-baseline-middle;
  display: table-cell;
}

/* Floats div container to the right */
.inner-right {
  width: initial;
  display: table-cell;
  border: 5px solid blue;
}

/* ??? helpe me position these equally in available space ??? */
.item {
  width: 30%; /* This is wrong because they don't adjust to fill the space next to the blue "inner-right" content*/
  text-align: center;
  display: inline-block;
  border: 5px solid red;
}

＆＃13;

<div class="outer">
  <div class="inner-left">
    <div class="item">Image and text here. I want all three of these to sit next too each other. But their width should adjust too fill the available space next to the blue "inner-right" content.</div>
    <div class="item">Image and text here. I want all three of these to sit next too each other. But their width should adjust too fill the available space next to the blue "inner-right" content.</div>
    <div class="item">Image and text here. I want all three of these to sit next too each other. But their width should adjust too fill the available space next to the blue "inner-right" content</div>
  </div>
  <div class="inner-right">
    Some other divs and tables go in here. The width of this part will exapand based on the dynamic content it contains.
  </div>
</div>

＆＃13;

根据可用空间调整嵌套div的大小

3 个答案: