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”需要占用它所在的任何容器的全宽度房地产，而同时“信息”和“内容”需要获得相同数量的宽度“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，因为这解决了与你相似的问题。