2个div并排排列,如何使正确的div填充宽度100%？

Question

我想知道这样做的最佳方法是......

我有3 div秒:

• 一个div#container与width=100%;保持2个内div小号

• 一个div#inner_left与width动态地改变,但不宽于200像素(将保持产品图像)

• 一个div#inner_right其中宽度应填充该空间的其余部分在所述容器(将包含文本描述中示出的产品)

  #container {
     width:100%
  }
  
  #inner_left {
      display:inline-block:
      max-width:200px;
  }
  
  #inner_right {
      display:inline-block;
      width:100%; 
  }
  

问题是div#inner_right创建换行符并填充整个宽度.如何使它们彼此相邻,正确div计算左边的宽度div(动态变化？).我已经用其他方式工作,但我正在寻找一个干净的解决方案......

任何有关CSS菜鸟的帮助都非常感谢!

Answer 1

我在答案中没有真正看到一个好的解决方案.所以我会分享我的.

最好的方法是使用table-cellCSS中的选项.要添加的一个重要事项是具有像素宽度的元素的"最小宽度".

例:

<div id="left">
    Left
</div>
<div id="right">
    right
</div>

CSS:

#left {
    display: table-cell;
    min-width: 160px;
}
#right {
    display: table-cell;
    width: 100%;
    vertical-align: top;
}

Answer 2

看看" 液体布局 ",它可以描述你所谈论的内容.

你可能正在寻找这个.

在您的示例中,尝试将显示设置为内联.但是,您在技术上不能使用其中的块级元素,因此请查看我上面发布的链接.:)

如果你使用浮点数将宽度设置为100%的问题是它被认为是容器的100%,所以它不起作用,因为100%包括左div的宽度.

编辑:以下是另一个答案的示例,为了简单起见,我编辑了它以包含上面示例站点中的html/css.

我还将其包含在下面:

HTML

<div id="contentwrapper">
    <div id="contentcolumn">
        <div class="innertube"><b>Content Column: <em>Fluid</em></b></div>
    </div>
</div>
<div id="leftcolumn">
    <div class="innertube"><b>Left Column: <em>200px</em></b></div>
</div>

CSS

#contentwrapper{
float: left;
width: 100%;
}

#contentcolumn{
margin-left: 200px; /*Set left margin to LeftColumnWidth*/
}

#leftcolumn{
float: left;
width: 200px; /*Width of left column*/
margin-left: -100%;
background: #C8FC98;
}

Answer 3

这可以通过使用 Flex-Box 来实现，Flex-Box 已经在 CSS3 中引入，并且根据Can I use is cross-browser。

.container { 
  display: flex; 
}

.left {
  width: 100px; /* or leave it undefined */
}

.right { 
  flex-grow: 1;
}

/* some styling */
.container {height: 90vh}
.left {background: gray}
.right {background: red}

<div class="container">

  <div class="left">100px</div>
  <div class="right">Rest</div>
  
</div>