Html 2个div并排对齐，如何使正确的div填充宽度为100%？

2 divs aligned side by side, how to make right div fill width 100%?

提问by thedeepfield

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

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

I have 3 divs:

我有 3div秒：

• a div#containerwith width=100%;that holds 2 inner divs

• a div#inner_leftwith widthchanging dynamically, but no wider than 200px (will hold a product image)

• an div#inner_rightwhere the width should fill the rest of the space in the container (will contain text to describe the product shown)

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

• 一个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%; 
  }
  

The problem is that the div#inner_rightcreates a line break and fills the entire width. How can I make them align next to each other, with the right divaccounting 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 的任何帮助！

采纳答案by Richard Marskell - Drackir

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. :)

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

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

回答by w00

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-celloption in CSS. One important thing to add is a 'min-width' to the element that has a pixel width.

最好的方法是使用table-cellCSS 中的选项。要添加的一件重要事情是具有像素宽度的元素的“最小宽度”。

Example:

例子：

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

CSS:

CSS：

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

回答by arc

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

这可以通过使用 Flex-Box 来实现，Flex-Box 已经在 CSS3 中引入，并且根据Can I useis 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>

回答by thedeepfield

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

所以即使我只想用 CSS 来做到这一点，我最终只使用了表格......

回答by Ethan

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/。还有其他几个有用的。

回答by Valamas

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.

我的情况是当我想在标签旁边显示几个图标时。我使用流体类来表示 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;
}

回答by tristan625

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

您需要为两个 div 提供 position:absolute 样式属性

回答by Damien Pirsy

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

编辑：阅读一下，这是一个不错的小指南：quirksmode