Question

之前可能已经回答了几次，但我找不到这个问题的答案。

<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/

自动宽度div框

1 个答案: