错误的浮动图像

Question

我正在尝试使用悬停效果，但遇到了问题。我正在尝试将 6 张图像并排放入两列中。但它没有正确显示。我希望它们并排显示，但只有前两个是这样显示的。其他四个在彼此之下。请问你能帮帮我吗？ :)

body {
 color: #333;
 font-family: 'Open Sans', sans-serif;
 font-weight: 300;
}

.column {
 margin: 5px 5px 5px 5px;
 padding: 0;
}
.column:last-child {
 padding-bottom: 0px;
}
.column::after {
 content: "";
 /*clear: both;*/
 display: inline;
 float: left;
}
.column div {
 position: relative;
 float: left;
 width: 375px;
 height: 225px;
 margin: 0 0 0 25px;
 padding: 0;
}
.column div:first-child {
  margin-left: 0;
}
.column div span {
  float: left;
 position: absolute;
 bottom: -20px;
 left: 0;
 z-index: 0;
 display: inline;
 width: 375px;
 margin: 0;
 padding: 0;
 color: #444;
 font-size: 18px;
 text-decoration: none;
 text-align: center;
 -webkit-transition: .3s ease-in-out;
 transition: .3s ease-in-out;
 opacity: 0;
}
figure {
 width: 400px;
 height: 250px;
  margin-left: 10px;
  margin-right: 10px;
 padding: 0;
 background: #fff;
 overflow: hidden;
 float: left;
}
figure:hover+span {
 bottom: -36px;
 opacity: 1;
}

/* Shine */
.hover14 figure {
 position: relative;
}
.hover14 figure::before {
 position: absolute;
 top: 0;
 left: -75%;
 z-index: 2;
 display: block;
 content: '';
 width: 50%;
 height: 100%;
 background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
 background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
 -webkit-transform: skewX(-25deg);
 transform: skewX(-25deg);
}
.hover14 figure:hover::before {
 -webkit-animation: shine .75s;
 animation: shine .75s;
}
@-webkit-keyframes shine {
 100% {
  left: 125%;
 }
}
@keyframes shine {
 100% {
  left: 125%;
 }
}

<h1>Vítej v Kasiho světě!</h1>
<p>Má nabídka toho, co umím, zvládám, čemu se věnuji a co chci šířit do světa. Stejně tak chci získávat zkušenosti další i úplně nové. Pojď se tady porozhlédnout a třeba se mi ozveš a navážeme spolupráci.</p>
<br />
<div class="hover14 column">
  <div><a href="http://kasihosvet.g6.cz/o-mne/">
    <figure><img src="http://kasihosvet.g6.cz/wp-content/uploads/2020/03/o-mne.png" /></figure></a></div> 
<div class="hover14 column">
  <div><a href="http://kasihosvet.g6.cz/trener-parkouru/">
    <figure><img src="http://kasihosvet.g6.cz/wp-content/uploads/2020/03/parkour.png" /></figure></a></div> <a href="http://kasihosvet.g6.cz/editor-videa/">
<div class="hover14 column">
  <div>
    <figure><img src="http://kasihosvet.g6.cz/wp-content/uploads/2020/03/videoedit.png" /></figure></a></div> <a href="http://kasihosvet.g6.cz/webmaker/">
<br>
<div class="hover14 column">
  <div>
    <figure><img src="http://kasihosvet.g6.cz/wp-content/uploads/2020/03/webkamekr.png" /></figure></a></div> <a href="http://kasihosvet.g6.cz/grafika/">
<div class="hover14 column">
  <div>
    <figure><img src="http://kasihosvet.g6.cz/wp-content/uploads/2020/03/grafika.png"/></figure></a></div> <a href="http://kasihosvet.g6.cz/kontakt/">
<div class="hover14 column">
  <div>
    <figure><img src="http://kasihosvet.g6.cz/wp-content/uploads/2020/03/kontakt.png" /></figure></a></div>

Answer 1

用这个

替换你的HTML

    <h1>Vítej v Kasiho světě!</h1>
<p>Má nabídka toho, co umím, zvládám, čemu se věnuji a co chci šířit do světa. Stejně tak chci získávat zkušenosti další i úplně nové. Pojď se tady porozhlédnout a třeba se mi ozveš a navážeme spolupráci.</p>


<div class="hover14 column">
  <div><a href="http://kasihosvet.g6.cz/o-mne/">
    <figure><img src="http://kasihosvet.g6.cz/wp-content/uploads/2020/03/o-mne.png" /></figure></a></div>
    <div><a href="http://kasihosvet.g6.cz/trener-parkouru/">
      <figure><img src="http://kasihosvet.g6.cz/wp-content/uploads/2020/03/parkour.png" /></figure></a></div>
      <div>
        <figure><img src="http://kasihosvet.g6.cz/wp-content/uploads/2020/03/videoedit.png" /></figure></a>
      </div>
      <div><figure><img src="http://kasihosvet.g6.cz/wp-content/uploads/2020/03/webkamekr.png" /></figure></a></div>
      <div><figure><img src="http://kasihosvet.g6.cz/wp-content/uploads/2020/03/grafika.png"/></figure></a></div>
      <div><figure><img src="http://kasihosvet.g6.cz/wp-content/uploads/2020/03/kontakt.png" /></figure></a></div>
    </div>

和css与此

body {
  color: #333;
  font-family: "Open Sans", sans-serif;
  font-weight: 300;
}

.column {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

figure {
  width: 400px;
  height: 250px;
  margin-left: 10px;
  margin-right: 10px;
  padding: 0;
  background: #fff;
  overflow: hidden;
  float: left;
}
figure:hover + span {
  bottom: -36px;
  opacity: 1;
}

/* Shine */
.hover14 figure {
  position: relative;
}
.hover14 figure::before {
  position: absolute;
  top: 0;
  left: -75%;
  z-index: 2;
  display: block;
  content: "";
  width: 50%;
  height: 100%;
  background: -webkit-linear-gradient(
    left,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.3) 100%
  );
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.3) 100%
  );
  -webkit-transform: skewX(-25deg);
  transform: skewX(-25deg);
}
.hover14 figure:hover::before {
  -webkit-animation: shine 0.75s;
  animation: shine 0.75s;
}
@-webkit-keyframes shine {
  100% {
    left: 125%;
  }
}
@keyframes shine {
  100% {
    left: 125%;
  }
}

@media (max-width: 750px) {
  .column {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
  }
}

我在栏中使用了网格布局，你有太多的 div 几乎不可能，而且你的一些链接不清楚它们的放置位置所以你可能需要再次添加几个, 但你现在应该将所有 6 张图像都放在 2 列中，由于图像的大小，它们之间有一个间隙，你需要尝试一下

错误的浮动图像

Wrong floating images

html

css

floating