Question

我有两列阴影模糊，但是浮动后，两列之间的阴影不可见。我使用边界框，但是它不起作用。如何解决这个问题？

.column {
  border-radius: 10px;
  border-style: solid;
  border-width: 5px;
  box-shadow: 10px 10px 5px grey;
  border-color: red;
  float: left;
  width: 25%;
  padding: 25px;
  box-sizing: border-box;
  height: auto;
  /* Should be removed. Only for demonstration */
}

.contain {
  object-fit: contain;
}

h3,
h5 {
  text-align: center;
  color: orange;
}

.over1 {
  width: 100%;
  height: 10em;
  overflow: hidden;
}

.more:link {
  color: black;
}

<body>
  <div class="column" style="background-color:blue;">
    <div>
      <h3>A selyemút tükrében</h3>
    </div>
    <img class="contain" src="selyemut.jpg" style="width:100%;height:200px">
    <div>
      <h5 style="color: white;">Fotókiállítás megnyitó ünnepség a Múzeumportán</h5>
    </div>
    <div class="over1">
      <p style="color:white;">A Kínából érkező Wei Xiang, valamint Szamódy Zsolt Olaf, Á. Tóth József és több magyar fotográfus képeiből készült kiállítást nyitották meg Cigándon, a Bodrogközi Múzeumportán 2018. június 27-én.A Selyemút hajdan összekötötte Kínát és a Világot,
        de a sok ezer kilométeres út mentén élő népek, népcsoportok mindennapjairól, kultúrájáról, napi történéseiről szinte semmit nem tudtak az emberek, lehettek akár kínaiak, akár európaiak.A hazai fotográfusok viszont felismerték ezt a hiányosságot
        és a Magyar Fotóművészek Szövetsége tagjai évekkel ezelőtt elkezdtek megismerkedni Kínával.
      </p>
    </div>
    <div>&nbsp;</div>
    <div><a href="http://www.google.com/" class="more">>> Bővebben...</a></div>
  </div>
  <div class="column" style="background-color:blue;">
    <div>
      <h3>A selyemút tükrében</h3>
    </div>
    <img class="contain" src="selyemut.jpg" style="width:100%;height:200px">
    <div>
      <h5 style="color: white;">Fotókiállítás megnyitó ünnepség a Múzeumportán</h5>
    </div>
    <div class="over1">
      <p style="color:white;">A Kínából érkező Wei Xiang, valamint Szamódy Zsolt Olaf, Á. Tóth József és több magyar fotográfus képeiből készült kiállítást nyitották meg Cigándon, a Bodrogközi Múzeumportán 2018. június 27-én.A Selyemút hajdan összekötötte Kínát és a Világot,
        de a sok ezer kilométeres út mentén élő népek, népcsoportok mindennapjairól, kultúrájáról, napi történéseiről szinte semmit nem tudtak az emberek, lehettek akár kínaiak, akár európaiak.A hazai fotográfusok viszont felismerték ezt a hiányosságot
        és a Magyar Fotóművészek Szövetsége tagjai évekkel ezelőtt elkezdtek megismerkedni Kínával.
      </p>
    </div>
    <div>&nbsp;</div>
    <div><a href="http://www.google.com/" class="more">>> Bővebben...</a></div>
  </div>
</body>

Answer 1

在列中添加右边距：

.column {
  border-radius: 10px;
  border-style: solid;
  border-width: 5px;
  box-shadow: 10px 10px 5px grey;
  border-color: red;
  float: left;
  width: 25%;
  padding: 25px;
  box-sizing: border-box;
  height: auto;
  /* Should be removed. Only for demonstration */
  margin-right: 50px;
}

.contain {
  object-fit: contain;
}

h3,
h5 {
  text-align: center;
  color: orange;
}

.over1 {
  width: 100%;
  height: 10em;
  overflow: hidden;
}

.more:link {
  color: black;
}

<body>
  <div class="column" style="background-color:blue;">
    <div>
      <h3>A selyemút tükrében</h3>
    </div>
    <img class="contain" src="selyemut.jpg" style="width:100%;height:200px">
    <div>
      <h5 style="color: white;">Fotókiállítás megnyitó ünnepség a Múzeumportán</h5>
    </div>
    <div class="over1">
      <p style="color:white;">A Kínából érkező Wei Xiang, valamint Szamódy Zsolt Olaf, Á. Tóth József és több magyar fotográfus képeiből készült kiállítást nyitották meg Cigándon, a Bodrogközi Múzeumportán 2018. június 27-én.A Selyemút hajdan összekötötte Kínát és a Világot,
        de a sok ezer kilométeres út mentén élő népek, népcsoportok mindennapjairól, kultúrájáról, napi történéseiről szinte semmit nem tudtak az emberek, lehettek akár kínaiak, akár európaiak.A hazai fotográfusok viszont felismerték ezt a hiányosságot
        és a Magyar Fotóművészek Szövetsége tagjai évekkel ezelőtt elkezdtek megismerkedni Kínával.
      </p>
    </div>
    <div>&nbsp;</div>
    <div><a href="http://www.google.com/" class="more">>> Bővebben...</a></div>
  </div>
  <div class="column" style="background-color:blue;">
    <div>
      <h3>A selyemút tükrében</h3>
    </div>
    <img class="contain" src="selyemut.jpg" style="width:100%;height:200px">
    <div>
      <h5 style="color: white;">Fotókiállítás megnyitó ünnepség a Múzeumportán</h5>
    </div>
    <div class="over1">
      <p style="color:white;">A Kínából érkező Wei Xiang, valamint Szamódy Zsolt Olaf, Á. Tóth József és több magyar fotográfus képeiből készült kiállítást nyitották meg Cigándon, a Bodrogközi Múzeumportán 2018. június 27-én.A Selyemút hajdan összekötötte Kínát és a Világot,
        de a sok ezer kilométeres út mentén élő népek, népcsoportok mindennapjairól, kultúrájáról, napi történéseiről szinte semmit nem tudtak az emberek, lehettek akár kínaiak, akár európaiak.A hazai fotográfusok viszont felismerték ezt a hiányosságot
        és a Magyar Fotóművészek Szövetsége tagjai évekkel ezelőtt elkezdtek megismerkedni Kínával.
      </p>
    </div>
    <div>&nbsp;</div>
    <div><a href="http://www.google.com/" class="more">>> Bővebben...</a></div>
  </div>
</body>

Answer 2

使用 margin-right （右页边距）将列彼此移开。

.column { 
    margin-right: 20px;
}

建议：不要同时使用内联样式和内部/外部样式。尽量避免这种情况，并将所有样式都放在一个地方。将来，您也可以轻松进行审核和更改。

如何使两列之间的阴影可见？

2 个答案: