auto width div boxes

Question

Это, возможно, ответили пару раз раньше, но я просто не могу найти этот ответ по моей конкретной проблеме.

Я работал над этим: http://jsfiddle.net/LPGGh/

<div class="wrapper"> 
<div class="project"> 
    <div class="media"></div> 
    <div class="text">Text</div> 
</div> 
<div class="project"> 
    <div class="media"></div> 
    <div class="text">Text</div> 
</div> 
<div class="project"> 
    <div class="media"></div> 
    <div class="text">Text</div> 
</div> 

.media{ 
width: 300px; 
height:200px; 
background-color:red; 
margin-bottom:1em; 
} 

.text{ 
margin-bottom:2em; 
} 

.project{ 
display: inline-block; 
margin-left: 1em; 
margin-right: 1em; 
} 

.wrapper{ 
margin-top: 1.65em; 
width: 100%; 
} 

Мой вопрос, как я получаю .media для автоматической подгонки по ширине, так что красные коробки всегда использует все пространство доступно и по-прежнему сохраняет границы, конечно?

Спасибо!

Answer 1

Я использовал вашу скрипку, поэтому имена в моем ответе немного отличаются.

Вот решение, создавая оболочку для медиа-элемента:

<div class="project_container_parent"> 
    <div class="project_container_child"> 
     <div class="media_parent"><div class="media"></div></div> 
     <div class="text">Text</div> 
    </div> 
    <div class="project_container_child"> 
     <div class="media_parent"><div class="media"></div></div> 
     <div class="text">Text</div> 
    </div> 
    <div class="project_container_child"> 
     <div class="media_parent"><div class="media"></div></div> 
     <div class="text">Text</div> 
    </div> 
</div> 

и настройки CSS так:

.media{ 
    width:100%; 
    height:200px; 
    background-color:red; 
    margin-bottom:1em; 
} 

.media_parent{ 
    margin-left:1em; 
    margin-right:1em;  
} 

.text{ 
    margin-bottom:2em; 
} 

.project_container_child{ 
    display: inline-block; 
    width:100%; 
} 

.project_container_parent{ 
    margin-top: 1.65em; 
} 

Вот ваша модифицированная скрипка: http://jsfiddle.net/LPGGh/13/