Question

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

如果没有其他.image div，我希望第一部分中的.image课程的宽度为100％。

然而，一旦存在另一个.image div，（如第二部分所示），我希望它默认回到50％宽度。

我该如何执行此操作？

＆＃13;

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

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 1

您可以将该部分显示为表格，将div.image显示为表格单元格。然后根据存在的“细胞”（div.image）的数量调整图像大小。

    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>

根据另一个Div的存在调整Div的风格？

2 个答案: