如果第一列中没有内容，两列布局是否可以缩小到 1 列?

Question

>我已经在这篇文章的末尾发布了我的解决方法来说明我的问题。

我有两列，左边的一列可能包含也可能不包含图像缩略图，右边的一列总是包含文本。

图像容器宽度设置为 %，图像本身以比例高度填充其父宽度的 100%。

然后，img 将等效的背景大小：覆盖应用于居中、裁剪和填充其父容器。

如果没有添加缩略图，css 有什么办法让文本列填充博客容器宽度的 100%？

我当前的解决方案涉及使用 ：empty 显示：none img 标记父容器，如果其中没有内容，但我需要一个解决方案，我可以在其中指定图像容器的宽度，如果没有图像，则将其缩小到 0。

希望这不会太复杂，任何澄清请问。需要支持回 IE10。我希望弹性框可以提供帮助？

<div class="blog-container">
<div class="featured-image-container">
<div class="featured-image-blog"><?php the_post_thumbnail('this is the img'); ?</div>
</div>
<div class="blog-entry-content-container">
<div class="blog-excerpt-container">
<?php the_excerpt;?>
</div>
</div>
</div>
//SCSS
@mixin maintain-ratio($ratio: 1 1) {
@if length($ratio) < 2 or length($ratio)>2 {
@warn "$ratio must be a list with two values.";
}
$width: 100%;
$height: percentage(nth($ratio, 2) / nth($ratio, 1));
width: $width;
height: 0;
padding-bottom: $height;
}
//CSS
.blog-container {
width: 100%;
display: flex;
display: -webkit-flex;
-webkit-flex-direction: column;
flex-direction: column;
}
.ourblog .featured-image-blog {
width:32%!important;/*I WANT TO MOVE THIS TO A PARENT CONTAINER (.image-container)*/
@include maintain-ratio(3 1);
margin: 10px 25px 20px 0!important;
font-size: 0!important;
position:relative!important;
overflow:hidden;   }
.ourblog .featured-image-blog img {
position: absolute;
/* Position the image in the middle of its container. */
top: -9999px;
right: -9999px;
bottom: -9999px;
left: -9999px;
margin: auto;
/* The following values determine the exact image behaviour. */
/* You can simulate background-size: cover/contain/etc.
by changing between min/max/standard width/height values.
These values simulate background-size: cover
*/
min-width: 100%;
min-height: 100%;
}
/*hide empty featured image container. !!!ensure no whitespace between tags in html!!! */
.ourblog .featured-image-blog:empty {
display: none!important;
}

Answer 1

使用弹性行然后设置，然后在列上使用弹性速记使它们弯曲到可用空间。基本示例 http://codepen.io/anon/pen/QpYzaV

.blog-container {
width: 100%;
display: flex; // is flex row by default
margin-bottom: 20px;
}
.featured-image-container {
flex: 1 0 30%;
img {
width: 100%;
}
}
.blog-entry-content-container {
padding: 20px;
background: grey;
flex: 1 0 100%;
}

使用具有帖子缩略图来呈现容器(如果它有图像集)。

<?php if ( has_post_thumbnail() ) : ?>
<!-- show the image container -->
<div class="featured-image-container">  
<?php the_post_thumbnail(); ?>
</div>
<?php else : ?>
<!-- show nothing -->
<?php endif; ?>