CSS组件灵活性

Question

我有一个css灵活性问题，我正试图解决，但我找不到真正的解决方案，我认为我只是没有清楚地看到解决方案，因为我要接近这个问题。

我已经构建了一个HTML内容组件，如下所示：

<div class="content_cmp">
    <div class="info"></div>
    <div class="content"></div>
</div>

使用这个CSS：

.content_cmp { width: 100%; }
.content_cmp .info { width: 25%; }
.content_cmp .content { width: 75%; }

就html而言，一切都有所作为，但我需要的css灵活性似乎有点繁琐。

我需要定义一次布局样式，但是“content_cmp”需要占用它所在的任何容器的全宽度空间，同时“info”和“content”需要获取相同的宽度无论宽度“content_cmp”占用多少，都在“content_cmp”内部。

我原本觉得百分比宽度是有序的，但是当我将组件放在一个简短的“列”中而不是放入一个“信息”和“内容”时，我的内容会变得混乱。广泛的“专栏”。

我只是忽略了解决方案，还是我不得不在内容展示方面做出一些妥协以获得灵活性？

Answer 1

只要查看你的代码，似乎只有宽度才能完成你所追求的目标。

如果信息和内容需要并排排列，那么你将不得不添加花车/定位。

试试这个：

.content_cmp { width:100%; overflow:hidden; }
.content_cmp .info { float:left; width:25%; overflow:hidden; }
.content_cmp .content { float:left; width:75%; overflow:hidden; }

如果它不是一个宽容器，你会遇到哪些具体问题？

还要考虑使用宽度而不是百分比作为替代选项来调整ems的大小

Answer 2

显然，了解如何自行编码非常重要，但您可以使用YUI Grid CSS节省大量时间来解决问题。与YUI Grid Builder玩游戏并查看它生成的CSS，因为这解决了与您类似的问题。