Question

我有以下图像的要求

我尝试使用桌子，但在对齐侧面图像方面仍然没有成功。

testTable.html

y <- rnorm(30)
x <- matrnorm(500*1000,30)
system.time( Rfast::univglms(y, x,"normal") )  ## 0.70 seconds

我的要求：

我想要中心活动图像，左右图像模糊。侧面图像应该看起来像在中心图像的后面

Answer 1

也许您可以尝试使用此代码，但要使其在幻灯片中显示，您需要在代码中添加jQuery。工作示例here 如果您需要有关侧面图像模糊的进一步帮助，请通过电子邮件faceree123@gmail.com与我联系：）

<div class="slider-wrapper">
  <div class="slider-btns">
     <button class="slider-btn btn-1 active"></button>
     <button class="slider-btn btn-2"></button>
     <button class="slider-btn btn-3"></button>
   </div>
  <div class="slider">
    <div class="slide">
      <img class="slide-img" src="your-1st-image.src">
      <!-- This is not necessary --><p>Slide 1</p>
    </div>
    <div class="slide">
      <img class="slide-img" src="your-2nd-image.src">
      <!-- This is not necessary --><p>Slide 2</p>
    </div>
    <div class="slide">
      <img class="slide-img" src="your-3rd-image.src">
      <!-- This is not necessary --><p>Slide 3</p>
    </div>
  </div>
</div>

<style>
*{
  margin: 0; padding: 0;
}
.slider-wrapper{
  overflow: hidden;
  position: relative;
  width: 100%; height: 300px; /* You can choose your own width and height */
  background: grey; /* This is not necessary */
}
.slider-wrapper > .slider{
  position: relative;
  width: 300%; height: 100%;
  left: 0%;
  transition: 1s;
}
.slider-wrapper > .slider-btns{
  z-index: 999;
  position: absolute;
  left: 50%; transform: translateX(-50%);
  top: 90%;
}
.slider-wrapper > .slider-btns > button.active{
  width: 20px; height: 20px;
  border-radius: 50px;
  border: none;
}
.slider-wrapper > .slider-btns > .slider-btn{
  width: 15px; height: 15px;
  border-radius: 50px;
  border: none;
}
.slider-wrapper > .slider > .slide{
  text-align: center; /* This is not necessary */
  float: left;
  margin: 0 20px;
  width: calc((70% / 3) - 40px); height: 100%;
  background: purple; /* This is not necessary */
}
.slider-wrapper > .slider > .slide > .slide-img{
  width: 100%; height: auto;
  display: none; /* When you use this code delete this line */
}

p{
  font-family: Arial; font-size: 40px;
  line-height: 300px;
} /* This style is not necessary */
</style>

Answer 2

您的查询对我来说仍然不清楚，但是我尽力理解并回答了这个问题。

<table class="container">
    <tr>
        <td class="left-image">
            <img src="https://dummyimage.com/600x400/000/fff" alt="Snow" style="width:100%">
        </td>
        <td class="center-image">
            <img src="https://dummyimage.com/600x400/000/fff" alt="Snow" style="width:100%">
        </td>
        <td class="right-image">
            <img src="https://dummyimage.com/600x400/000/fff" alt="Snow" style="width:100%">
        </td>
    </tr>
</table>

这是CSS

.container{
    width: 100%;
    height: 400px;
}

.left-image, .right-image{
    width: 33.33%;
    overflow: hidden;
}

.center-image{
    width: 33.33%;

}

以下是结果和小提琴

https://jsfiddle.net/u97oewqy/

Answer 3

也许这段代码有帮助。

边界折叠：折叠； 在容器上 设置填充：0； 图像。

<style>
.container{
    width: 100%;
    height: 200px;
    border-collapse: collapse;
}

.left-image, .right-image, .center-image {
  padding: 0
}

.left-image, .right-image{
    width: 10%;
    overflow: hidden;
}

.center-image{
    width: 80%;
}

</style>

<table class="container">
    <tr>
        <td class="left-image">
            <img src="https://picsum.photos/100/200" alt="Snow" style="width:100%">
        </td>
        <td class="center-image">
            <img src="https://picsum.photos/100/200" alt="Snow" style="width:100%">
        </td>
        <td class="right-image">
            <img src="https://picsum.photos/100/200" alt="Snow" style="width:100%">
        </td>
    </tr>
</table>

没有正确的CSS

3 个答案: