2格并排alignment，如何使右格填充宽度100％？
我想知道做这个最好的方法是…
我有3个div ：
-
width=100%;的div#containerwidth=100%;拥有2个内部div -
一个
div#inner_leftwidthdynamic变化，但不超过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创build换行并填充整个宽度。 我怎样才能让他们相互alignment，正确的div占左边的div （dynamic变化？）所采用的宽度。 我已经得到这个以其他方式工作，但我正在寻找一个干净的解决scheme…
任何CSS noob帮助非常感谢！
看看“ 液体布局 ”，它可以描述你在说什么。
你可能正在寻找这个 。
在你的例子中，尝试设置你的显示内联。 然而，你不会在技术上能够使用块级元素，所以看看我上面发布的链接。 🙂
如果您使用浮动宽度设置为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; }
我在这里的答案还没有真正看到一个好的解决scheme。 所以我会分享我的。
最好的方法是使用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; }
所以，即使我只想用CSS来做到这一点，我最终只是使用表格…
这可以使用已经与CSS3一起引入的Flex-Box来完成，根据我可以使用的是跨浏览器。
.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>
使用浮动：
#container{ width:100% } #inner_left{ float:left; max-width:200px; } #inner_right{ float:left; width:100%; }
编辑：有一个阅读这个，这是一个很好的小指南： quirksmode
你需要提供position：absolute style属性给你的div
这是基于@ w00的答案。 +1朋友。
我的情况是当我想在标签旁边显示几个图标时。 我使用的stream体类是那个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; }
这是一个简单的方法来实现这一点，这是相当频繁的需要。 它也经过testing，适用于所有的浏览器，包括非常古老的（如果没有的话，让我知道）。
链接到示例： 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_widthreplace为您的值（此处为200px）。
信用：这是基于http://htmldog.com/examples/pagelayout2/ 。 那里还有其他几个有用的。
