如果没有图像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

稍微混合并匹配宽度和弯曲，然后是。请务必通过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/

Answer 2

这是flexbox的方式 - 非常简短而且重点：

https://jsfiddle.net/mu3vo6vh/1/

标记与下面相同

样式

.image-w img { /* responsive image wrapper */
  display: block;
  width: 100%;
  height: auto;
}

.flex-example {
  display: flex; /* children will stretch deal with the space accordingly */
  align-items: center; /* for vertical align */
}

.image-w {
  min-width: 200px; /* try regular width and see what happens */
  margin-right: 1rem
}

这是经典浮点数

的常规方法

https://jsfiddle.net/mjmbm021/

标记

<div class="block">
  <div class="image-w">
    <img src="http://placehold.it/600x400" alt="">
  </div>
  <div class="text-w">
    <p>Lorem....</p>
  </div>
</div>

<div class="block">
  <div class="text-w">
    <p>Lorem....</p>
  </div>
</div>

样式

.image-w img {
  display: block;
  width: 100%;
  height: auto;
}

.block {
  width: 100%;
  float: left;
  border: 1px solid blue;
}
.image-w {
  max-width: 30%;
  float: left; /* really means let other stuff float around this */
  margin-right: 1rem;
}
.text-w {
  width: auto;
}

Answer 3

flexbox （参见2：nd示例）将是显而易见的选择，但有时需要更多的跨浏览器解决方案（旧浏览器的支持，有时更新，使用flex）

时出现问题

以下是使用display: table的建议。它与flex具有相同的优点，可以动态调整其内容。

＆＃13;

＆＃13;

.post-short-content {
  width: 100%;
  display: table;
}
.post-short-content > div {
  display: table-cell;
  vertical-align: top;
}
.post-short-content .entry-thumb img {
  display: block;
}
.post-short-content .entry-post {
  width: 100%;
  background: Gray;
}

@media only screen and (max-width: 768px) {
  .post-short-content .entry-post,
  .entry-header {
    padding : 0;
  }
  .post-short-content > div {
    display: block;
    width: 100%;
  }
  .post-short-content .entry-thumb img {
    margin: 0 auto;
  }
  .post-short-content .entry-post {
    margin-top: 0.8em;
  }
}

＆＃13;

<div class="post-short-content">
  <div class="entry-thumb">
    <img src="http://lorempixel.com/100/100/animals/3" alt="">
  </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>

＆＃13;

＆＃13;

＆＃13;

<击> 如果您可以使用flexbox

＆＃13;

＆＃13;

.post-short-content {
  display: flex;
}
.post-short-content .entry-thumb img {
  display: block;
}
.post-short-content .entry-post {
  flex: 1;
  background: Gray;
}

＆＃13;

<div class="post-short-content">
  <div class="entry-thumb">
    <img src="http://lorempixel.com/100/100/animals/3" alt="">
  </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>

＆＃13;

＆＃13;

＆＃13;

<击>