43

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

我有 3div秒：

  • 一个div#container带有width=100%;2 个内部divs 的

  • a动态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 noob 的任何帮助！

4

8 回答 8

64

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

最好的方法是使用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;
}
于 2012-04-30T20:00:03.027 回答
17

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

你可能正在寻找这个。

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

如果您使用浮动，将宽度设置为 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;
}
于 2011-02-09T06:29:12.680 回答
5

这可以通过使用 CSS3 引入的 Flex-Box 来完成，并且根据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>

于 2017-04-20T09:46:51.480 回答
2

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

于 2011-02-11T01:26:08.887 回答
0

使用浮动：

#container{
width:100%
}

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

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

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

于 2011-02-09T06:25:43.880 回答
0

您需要为您的 div 提供 position:absolute style 属性

于 2011-02-09T06:48:36.147 回答
0

这是基于@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;
}
于 2013-08-14T00:36:24.780 回答
0

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

示例链接：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/。那里还有其他几个有用的。

于 2017-08-03T19:51:03.463 回答