Html 2个分区并排对齐，如何使右分区填充宽度达到100%？

我想知道做这件事最好的方法是

我有3个

div

s：

• 宽度为100%的

  div#容器

  可容纳2个内部

  div

  s

• a

  div#inner_left

  ，宽度动态变化，但不超过200px（将保存产品图像）

• 一个

  div#inner_right

  ，其中宽度应填满容器中的剩余空间（将包含描述所示产品的文本）

问题是

div#inner_right

会创建一个换行符并填充整个宽度。如何使它们相邻对齐，使右侧的

div

占左侧

div

的宽度（动态变化？）。我已经用其他方法解决了这个问题，但我正在寻找一个干净的解决方案

非常感谢对CSS noob的任何帮助

使用浮动：

#container{
width:100%
}

#inner_left{
float:left;
max-width:200px;
}

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

编辑：读一读，这是一个很好的小指南：

看一看“”，它可以描述你在说什么

你可能在找

在您的示例中，尝试将显示设置为“内联”。但是，从技术上讲，您无法在其中使用块级元素，因此请查看我上面发布的链接。：）

如果使用浮动，将宽度设置为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>

---

您需要为您的两个div提供position:absolute-style属性，因此，尽管我只想用CSS来实现这一点，但我最终只使用了表…

我在这里的答案中没有看到一个好的解决方案。所以我会分享我的

最好的方法是使用CSS中的

表格单元格

选项。要添加的一个重要内容是为具有像素宽度的元素添加“最小宽度”

例如：

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

---

这是基于@w00的答案+一个朋友

我的情况是，我想在标签旁边显示几个图标。我使用流体类来表示nowrap的作用。这使得图标显示在同一行上

.sidebyside-left-fixed, .sidebyside-right-fixed
{
    display: table-cell;
    width: 100%;
}

.sidebyside-left-fluid , .sidebyside-right-fluid
{
    display: table-cell;
    vertical-align: top;
    white-space: nowrap;
}

---

这可以通过使用Flex Box来实现，Flex Box是在CSS3中引入的，并且符合is cross browser的要求

.container{
显示器：flex；
}
.左{
宽度：100px；/*或不定义*/
}
.对{
柔性生长：1；
}
/*一些款式*/
.集装箱{高度：90vh}
.左{背景：灰色}
.right{背景：红色}

100px
休息

这里有一个简单的方法来实现这一点，这是经常需要的。它还经过测试，可以与所有浏览器一起使用，包括非常旧的浏览器（如果没有，请告诉我）

链接到示例：

以下是HTML部分：

<div class="wrapper">
    <div class="left">
        Left Box
    </div>

    <div class="right">
        Right Box
    </div>

</div>

如果您没有使用任何CSS预处理器，那么将$left_宽度替换为您的值（这里是200px）

信用：这是基于。

---

还有其他一些有用的方法。

不起作用。请参阅和我回答中的评论。@odpogn：我被你的评论弄糊涂了一分钟！：P我已经更新了我的答案，包括为什么这不起作用，并展示了我的替代方案。是的，但如果它是leftcolumn（如他所说！），只要它不是那么宽，甚至这个完美的布局也会被打破…@Damien Pirsy:啊，你说得对，这是真的。但是，我认为没有任何方法可以做到这一点，除非第一个div的宽度是一个百分比或一个固定的数字（@odpogn:Yeah，不幸的是，在某些情况下它非常缺乏。：（感谢您建议LiquidLayouts。它的示例对我非常有帮助。@guillegr123-很高兴提供帮助！）lol-他做了一些简单的事情，工作起来很好，并且得到了负VOTEST这正是我需要做的。我改变了它，使我的右div固定，而左div动态地填补了空白。是时候我找到一个简单的版本了。在我的左单元格中，我添加了

空白：nowrap

表格单元格样式是目前为止最可靠的在不同的浏览器和平台上实现这样的事情……几乎和使用表一样可靠。有趣的是，现在使用布局表被看作是一个负面的东西，当所有的新的CSS网格库如Boundation和Bootstrap都在努力模仿W3以来基本上已经做了什么表时。C介绍了它们。是时候将本机网格系统引入HTML了。这应该是选定的答案，因为，这是有效的-选定的答案并不真的有效。谢谢。我一直在努力解决这个问题。这是为了我。Wohoooo FLEX-GROW FTW！

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

.sidebyside-left-fixed, .sidebyside-right-fixed
{
    display: table-cell;
    width: 100%;
}

.sidebyside-left-fluid , .sidebyside-right-fluid
{
    display: table-cell;
    vertical-align: top;
    white-space: nowrap;
}

<div class="wrapper">
    <div class="left">
        Left Box
    </div>

    <div class="right">
        Right Box
    </div>

</div>

.wrapper {
    position: relative;
}

$left_width: 200px;
.left {
    position: absolute;
    left: 0px;
    width: $left_width;
}
.right {
    margin-left: $left_width;
}