Question

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

我有3 div s：

div#container width=100%;，其中包含2个内div
div#inner_left width动态变化，但不超过200px（将保留产品图片）

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 noob的任何帮助！

Answer 1

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

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

示例：

<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

看看“liquid layouts”它可以描述你在说什么。

您可能正在寻找this one。

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

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

编辑：Here是另一个答案的示例，为了简单起见，我编辑了它以包含上面示例网站中的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

所以即使我只想用CSS做这件事，我最后只使用了表格......

Answer 4

这可以使用Flex-Box来完成，它已经与CSS3一起引入，并且根据Can I use是跨浏览器。

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

Answer 5

使用浮动：

#container{
width:100%
}

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

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

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

Answer 6

你需要提供位置：你的div的绝对样式属性

Answer 7

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

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

Answer 8

这是实现这一目标的简单方法，而且这是经常需要的。它也经过测试，适用于所有浏览器，包括非常旧的浏览器（如果没有，请告诉我。）

链接到示例：https://jsfiddle.net/collinsethans/jdgduw6a/

这是HTML部分：

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

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

</div>

相应的SCSS：

.wrapper {
    position: relative;
}

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

如果您没有使用任何CSS预处理器，请将$ left_width替换为您的值（此处为200px）。

信用：这是基于http://htmldog.com/examples/pagelayout2/。那里还有其他一些有用的东西。

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

8 个答案: