html - 如果没有图像 css，请占用可用空间

Question

我有以下布局

<div class="post-short-content">
                <div class="entry-thumb"></div>
                <div class="entry-post"></div>
</div>

CSS

    .post-short-content {
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
.post-short-content .entry-thumb {
    width: 30%;
}
.post-short-content > div {
    float: left;
}
.post-short-content .entry-post {
    width: 70%;
}

响应式布局

@media only screen and (max-width: 768px) {
    .post-short-content .entry-post,
    .entry-header {
        padding : 0;
    }
    .post-short-content > div {
        clear: both;
        float: none;
        width: 100% !important;
    }
    .post-short-content .entry-thumb {
        text-align: center;
    }
    .post-short-content .entry-post {
        margin-top: 0.8em;
    }
}

现在看起来像这样

但问题是，在没有图像的情况下，文本也会像这样从 div 空间中占用 70%

如果没有图像，是否可以仅使用 CSS 使文本占宽度的 100%？

更新

抱歉忘了说，我不能使用 flex，因为这个网站将在移动设备上使用。

Answer 1

将 width 和 flex 进行一些混合和匹配，就可以了。请务必通过 autoprefixer 运行您的 flex 规则以获得跨浏览器支持。

.post-short-content {
        width: 100%;
        height: 100%;
       display:flex;
    }
.post-short-content .entry-thumb span {
    width: 30%;
     background:lightBlue;
}
.post-short-content > div {
    display:block;
     height:3em;
}
.post-short-content .entry-post {
    min-width:70%;
     flex:1 0 auto;
     background:Gray;
}

<div class="post-short-content">
                <div class="entry-thumb">
                        <span>Faux Image</span>
                    </div>
                <div class="entry-post">Lora liked to find a photo</div>
</div>

<div class="post-short-content">
                <div class="entry-thumb">

                    </div>
                <div class="entry-post">Lora liked to find a photo</div>
</div>

https://jsfiddle.net/cmckay/jd0vxh3m/

http://autoprefixer.github.io/