Question

我有一个问题，我正在尝试制作一个本身宽度不同的内容框。在这个内容框中，将有另外两个框，其中一个我将知道确切的宽度，另一个我不会。问题是我希望能够设置我知道的内容的宽度，然后让其他内容占据宽度的其余部分（我不知道）。如果你看一下这个页面：

http://ryanzec.com/tests/test1/：最好用任何浏览器的最新版本来看这个。

第3个，第5个，也是最后一个是不好的，因为我不知道宽度的框中的内容（带有文本的那个）占用了多个推送其他内容的行（与按钮）向下。我希望按钮始终位于顶部的文本旁边。我怎样才能干净利落地获得这种效果？

请注意，我对浏览器支持的关注是每个浏览器的最新版本。 IE 8不是一个高优先级的问题，即使我希望它看起来下降（我不在乎它没有圆角或类似的小东西）。我不太关心IE 7 // 6（就目前来说，这看起来像是在那些浏览器中使用cray。）

Answer 1

你可以在源代码中的.title之前移动.controls，然后从.title中移除浮动。这将使控件和标题保持在同一行，但会使标题包含在控件下。要停止换行，可以给.title一个等于.controls宽度的右边距。

Answer 2

您可以使用jquery：

<div id="content-box">
<div class="known" style="width:300px;"></div>
<div class="unknown"></div>
<div>
<script type="text/javascript">
var box = $('.unkown').width();
$('#content-box').css('width',(box+300)+'px');
</script>

CSS内容宽度/浮动问题

2 个答案: