根据另一个 div 的状态调整另一个 div 的样式？

Question

在提供的摘要中，我有3个部分：第一个包含一个图像，第二个图像有两个图像，最后一个没有图像。

我希望第一部分中的.image类在宽度中为100％，如果没有其他.image Div存在。

但是，一旦存在另一个 .imagediv(如第二部分所示(，我希望它默认回到50％的宽度。

我应该如何执行此操作？

$(function() {
  $('.container > .section').each(function() {
    if (!$(this).find(".image").length) {
      $(this).before('<div class="noimage">No images to display.</div>');
    }
  });
});

body {
  font-size: 16px;
  margin: 0;
  padding: 0;
  border: 0;
}
h1 {
  font-size: 22px;
  margin-top: 0;
  margin-bottom: 10px;
}
.container {
  box-sizing: border-box;
  overflow: auto;
}
.image {
  float: left;
  display: block;
  width: 50%;
  line-height: 0;
}
.image img {
  width: 100%;
  height: auto;
}
.container {
  margin: 0 auto;
  max-width: 300px;
  border: 1px solid lightgrey;
  padding: 10px;
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- 1 Image -->
<div class="container">
  <h1>Section With 1 Image:</h1>
  <div class="section">
    <div class="image"><img src="https://freeiconshop.com/wp-content/uploads/edd/pear-flat.png"></div>
  </div>
</div>
<!-- 2 Images -->
<div class="container">
  <h1>Section With 2 Images:</h1>
  <div class="section">
    <div class="image"><img src="https://freeiconshop.com/wp-content/uploads/edd/ice-cream-cone-flat.png"></div>
    <div class="image"><img src="https://freeiconshop.com/wp-content/uploads/edd/orange-flat.png"></div>
  </div>
</div>
<!-- No Images -->
<div class="container">
  <h1>Section With No Images:</h1>
  <div class="section"></div>
</div>

Answer 1

您可以将部分显示为表格，而Div.Image作为表格。然后，图像将根据存在的"单元格"(Div.Image's(的数量进行调整。

    div.container{
      display: 100%;
    }
    div.section{
      width: 100%;
      display: table;
    }
    div.section div.image{
      display: table-cell;
    }
    div.section div.image img{
      width: 100%;
      height: auto;
    }

这是一个JSFIDDLE：https://jsfiddle.net/coliniloc/lnnkpx6l/

Answer 2

用flexbox找出了一个简单的解决方案：

$(function() {
  $('.container > .section').each(function() {
    if (!$(this).find(".image").length) {
      $(this).before('<div class="noimage">No images to display.</div>');
    }
  });
});

body {
  font-size: 16px;
  margin: 0;
  padding: 0;
  border: 0;
}
h1 {
  font-size: 22px;
  margin-top: 0;
  margin-bottom: 10px;
}
.container {
  box-sizing: border-box;
  margin: 0 auto;
  max-width: 300px;
  border: 1px solid lightgrey;
  padding: 10px;
  display: block;
}
.section {
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
  align-items: center;
  margin: 0 -5px;
}
.image {
  flex: 1 1 50%;
  line-height: 0;
  width: 100%;
  padding: 0 5px;
  box-sizing: border-box;
}
.container .image:nth-of-type(n+3) {
  padding-top: 10px;
}
.image img {
  width: 100%;
  height: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- 1 Image -->
<div class="container">
  <h1>Section With 1 Image:</h1>
  <div class="section">
    <div class="image"><img src="https://freeiconshop.com/wp-content/uploads/edd/pear-flat.png"></div>
  </div>
</div>
<!-- 2 Images -->
<div class="container">
  <h1>Section With 2 Images:</h1>
  <div class="section">
    <div class="image"><img src="https://freeiconshop.com/wp-content/uploads/edd/pear-flat.png"></div>
    <div class="image"><img src="https://freeiconshop.com/wp-content/uploads/edd/ice-cream-cone-flat.png"></div>
  </div>
</div>
<!-- 4 Images -->
<div class="container">
  <h1>Section With 4 Images:</h1>
  <div class="section">
    <div class="image"><img src="https://freeiconshop.com/wp-content/uploads/edd/pear-flat.png"></div>
    <div class="image"><img src="https://freeiconshop.com/wp-content/uploads/edd/ice-cream-cone-flat.png"></div>
    <div class="image"><img src="https://freeiconshop.com/wp-content/uploads/edd/orange-flat.png"></div>
    <div class="image"><img src="https://freeiconshop.com/wp-content/uploads/edd/burger-flat.png"></div>
  </div>
</div>
<!-- No Images -->
<div class="container">
  <h1>Section With No Images:</h1>
  <div class="section"></div>
</div>