两个div并排对齐，如何使右div填充宽度100%?

I'm wondering what the best way to go about doing this is...

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

I have 3 divs:

我有3个div:

a div#container with width=100%; that holds 2 inner divs

一个div #容器宽度= 100%;它包含两个内部divs
a div#inner_left with width changing dynamically, but no wider than 200px (will hold a product image)

div#inner_left的宽度会动态变化，但宽度不能超过200px(将保存产品映像)
an div#inner_right where the width should fill the rest of the space in the container (will contain text to describe the product shown)

一个div#inner_right，其宽度应该填充容器中的其余空间(将包含描述所示产品的文本)
```
#container {
   width:100%
}

#inner_left {
    display:inline-block:
    max-width:200px;
}

#inner_right {
    display:inline-block;
    width:100%; 
}
```

The problem is that the div#inner_right creates a line break and fills the entire width. How can I make them align next to each other, with the right div accounting for the width taken by the left div (which changes dynamically?). I've gotten this to work other ways, but I'm looking for a clean solution...

问题是，div#inner_right创建一个换行符并填充整个宽度。我如何使它们对齐到相邻的位置，右边的div会计算左div所占的宽度(这是动态变化的)。我用了其他方法，但我在寻找一个干净的解决方案……

Any help for a CSS noob is much appreciated!

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

8 个解决方案

#1

Have a look at "liquid layouts" it can describe what you're talking about.

看看“液体布局”，它可以描述你在说什么。

You're probably looking for this one.

你可能在找这个。

In your example, try setting your display to inline. However, you won't technically be able to use block level elements in it, so have a look at the links I posted above. :)

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

The problem with setting the width to 100% if you're using floats is that it is considered 100% of the container, so it won't work either since the 100% includes the left div's width.

如果使用浮点数，将宽度设置为100%的问题是，它被认为是100%的容器，因此它不会工作，因为100%包含左div的宽度。

Edit: Here is the example of the other answer, I've edited it to include the html/css from the example site above for simplicity's sake.

编辑:这里是另一个答案的示例，为了简单起见，我将它编辑为包含上面示例站点的html/css。

I'll also include it below:

我还将包括以下内容:

HTML

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

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;
}

#2

I haven't really seen a good solution in the answers here. So I'll share mine.

我在这里没有看到一个好的答案。所以我将分享我的。

Best way to do this is by using the table-cell option in CSS. One important thing to add is a 'min-width' to the element that has a pixel width.

最好的方法是在CSS中使用表格单元选项。要向具有像素宽度的元素添加一个“最小宽度”。

Example:

例子:

<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;
}

#3

So even though I wanted to do this with CSS only, I ended up just using tables...

所以，尽管我想只用CSS来实现这个功能，我最终还是使用了表格……

#4

This can be accomplished using Flex-Box, which has been introduced with CSS3 and according to Can I use is cross-browser.

这可以使用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>

#5

Use floating:

使用浮动:

#container{
width:100%
}

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

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

Edit: have a read a this, it's a nice little guide : quirksmode

编辑:读一下这个，这是一本不错的小指南:《怪癖》

#6

you need to provide position:absolute style property to both your div's

您需要为您的div提供position:绝对样式属性

#7

This is based on @w00 's answer. +1 friend.

这是基于@w00的答案。+ 1的朋友。

My situation was when I wanted to show a couple of icons next to a label. I use the fluid class for that which is where the nowrap comes in. This is so the icons appear on the same line.

我的情况是，我想在标签旁边显示一些图标。我用流体类来表示现在说唱的来源。这使得图标出现在同一条线上。

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

#8

Here is an easy method to achieve this, and this is something that's quite frequently needed. It's also tested to works with all browsers, including the very old ones (let me know if it doesn't on any).

这里有一个简单的方法来实现这一点，这是经常需要的。它还被测试可以与所有浏览器兼容，包括非常旧的浏览器(如果没有的话，请告诉我)。

Link to a sample: https://jsfiddle.net/collinsethans/jdgduw6a/

链接到一个示例:https://jsfiddle.net/collinsethans/jdgduw6a/。

Here's the HTML part:

这是HTML的部分:

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

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

</div>

And the corresponding SCSS:

和相应的SCSS:

.wrapper {
    position: relative;
}

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

If you are not using any CSS preprocessors, then replace the $left_width with your value (200px here).

如果您没有使用任何CSS预处理器，那么将$left_width替换为您的值(这里是200px)。

Credit: This is based on http://htmldog.com/examples/pagelayout2/. There are several other useful ones there.

信贷:这是基于http://htmldog.com/examples/pagelayout2/。还有其他几个有用的。

#1