HTML 为什么这个锁向左？

Question

我最近添加了一个自定义 HTML/CSS 片段来创建一个自动淡出的幻灯片。它目前锁定在我屏幕的左侧。当我缩小 window 宽度时，幻灯片会锁定到位，其他元素（如 twitter 模块）会在其下方。

之前

之后

我希望这样，随着屏幕宽度的减小，左侧的 space 在每一侧都均匀分布。

HTML

<div class="css-slideshow" style="margin-left:30%; margin-top:-22px; padding:none;">
    <figure>
        <img src="instore.jpg" style="width: 600px; height:auto;" />
    </figure>
    <figure>
        <img src="breadplatter.jpg" style="width: 600px; height:auto;" />
    </figure>
    <figure>
        <img src="herringplatter.jpg" style="width: 600px; height:auto;" />
    </figure>
    <figure>
        <img src="yomtov.jpg" style="width: 600px; height:auto;" />
    </figure>
    <figure>
        <img src="froyo.jpg" style="width: 600px; height:auto;" />
    </figure>
    <figure>
        <img src="fishplatters.jpg" style="width: 600px; height:auto;" />
    </figure>
    <figure>
        <img src="slush.jpg" style="width: 600px; height:auto;" />
    </figure>
    <figure>
        <img src="simanim.jpg" style="width: 600px; height:auto;" />
        <!-- <figcaption><strong>Last Caption:</strong>Your last caption goes here</figcaption> -->
    </figure>


  </div>

CSS

.css-slideshow {
position: relative;         /* positioning facilities */
max-width: auto;            /* maximum width of the image */
height: 370px;
margin: 1em auto .5em auto;             /* some margin */
font-family: "Montserrat", sans-serif;  /* just a custom font */
font-weight: 300;                       /* font-weight, semibold */
}

.css-slideshow figure {
margin: 0;                  /* ensuring there is no margin */
max-width: 495px;
height: 370px;
background: #fff;           /* white background */
position: absolute;         /* positioning facilities */
}

.css-slideshow img {                /* a shadow for our box wrapper */
-webkit-box-shadow: 0 0 2px #666;
box-shadow: 0 0 2px #666;
}

/* Give the figcaption a 0% opacity at first */
.css-slideshow figcaption {
position: absolute;
top: 5px;
color: #fff;
background: rgba(0,0,0, .3);
font-size: .8em;
padding: 8px 12px;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transition: opacity .5s;
-moz-transition: opacity .5s;
-o-transition: opacity .5s;
-ms-transition: opacity .5s;
transition: opacity .5s;    /* transition duration */
}

/* Give the figcaption a 100% opacity at first */
.css-slideshow:hover figure figcaption {
-webkit-transition: opacity .5s;
-moz-transition: opacity .5s;
-o-transition: opacity .5s;
-ms-transition: opacity .5s;
transition: opacity .5s;        /* transition duration */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}


/* Here every child of css-transition gets animated */

.css-slideshow figure:nth-child(1) {
-webkit-animation: xfade 36s 31.5s  infinite;
-moz-animation: xfade 36s 31.5s  infinite;
-ms-animation: xfade 36s 31.5s infinite;
-o-animation: xfade 36s 31.5s infinite;
animation: xfade 36s 31.5s infinite;
}
.css-slideshow figure:nth-child(2) {
-webkit-animation: xfade 36s 27s infinite;
-moz-animation: xfade 36s 27s infinite;
-ms-animation: xfade 36s 27s infinite;
-o-animation: xfade 36s 27s infinite;
animation: xfade 36s 27s infinite;
}
.css-slideshow figure:nth-child(3) {
-webkit-animation: xfade 36s 22.5s infinite;
-moz-animation: xfade 36s 22.5s infinite;
-ms-animation: xfade 36s 22.5s infinite;
-o-animation: xfade 36s 22.5s infinite;
animation: xfade 36s 22.5s infinite;
}
.css-slideshow figure:nth-child(4) {
-webkit-animation: xfade 36s 18s infinite;
-moz-animation: xfade 36s 18s infinite;
-ms-animation: xfade 36s 18s infinite;
-o-animation: xfade 36s 18s infinite;
animation: xfade 36s 18s infinite;
}
.css-slideshow figure:nth-child(5) {
-webkit-animation: xfade 36s 13.5s infinite;
-moz-animation: xfade 36s 13.5s infinite;
-ms-animation: xfade 36s 13.5s infinite;
-o-animation: xfade 36s 13.5s infinite;
animation: xfade 36s 13.5s infinite;
}
.css-slideshow figure:nth-child(6) {
-webkit-animation: xfade 36s 9s infinite;
-moz-animation: xfade 36s 9s infinite;
-ms-animation: xfade 36s 9s infinite;
-o-animation: xfade 36s 9s infinite;
animation: xfade 36s 9s infinite;
}
.css-slideshow figure:nth-child(7) {
-webkit-animation: xfade 36s 4.5s infinite;
-moz-animation: xfade 36s 4.5s infinite;
-ms-animation: xfade 36s 4.5s infinite;
-o-animation: xfade 36s 4.5s infinite;
animation: xfade 36s 4.5s infinite;
}
.css-slideshow figure:nth-child(8) {
-webkit-animation: xfade 36s 0s infinite;
-moz-animation: xfade 36s 0s infinite;
-ms-animation: xfade 36s 0s infinite;
-o-animation: xfade 36s 0s infinite;
animation: xfade 36s 0s infinite;
}


@keyframes "xfade" {
 0% {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
 }
14.67% {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
}
16.67% {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
}
 98% {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
 }
 100% {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
 }
}
@-moz-keyframes xfade {
 0% {
   filter: alpha(opacity=100);
   opacity: 1;
 }
14.67% {
    filter: alpha(opacity=100);
    opacity: 1;
}
16.67% {
    filter: alpha(opacity=0);
    opacity: 0;
}
 98% {
   filter: alpha(opacity=0);
   opacity: 0;
 }
 100% {
   filter: alpha(opacity=100);
   opacity: 1;
 }
}
@-webkit-keyframes "xfade" {
 0% {
   filter: alpha(opacity=100);
   opacity: 1;
 }
14.67% {
    filter: alpha(opacity=100);
    opacity: 1;
}
16.67% {
    filter: alpha(opacity=0);
    opacity: 0;
}
 98% {
   filter: alpha(opacity=0);
   opacity: 0;
 }
 100% {
   filter: alpha(opacity=100);
   opacity: 1;
 }
}
@-ms-keyframes "xfade" {
 0% {
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
 }
14.67% {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
}
16.67% {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
}
 98% {
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
 }
 100% {
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
 }
}
@-o-keyframes "xfade" {
 0% {
   filter: alpha(opacity=100);
   opacity: 1;
 }
14.67% {
    filter: alpha(opacity=100);
    opacity: 1;
}
16.67% {
    filter: alpha(opacity=0);
    opacity: 0;
}
 98% {
   filter: alpha(opacity=0);
   opacity: 0;
 }
 100% {
   filter: alpha(opacity=100);
   opacity: 1;
 }
}

Answer 1

您应该将 body 分成两部分，并将幻灯片放在幻灯片部分。

其他元素位于幻灯片下方，因为图片的宽度是固定大小。确保宽度是相对于幻灯片部分的宽度。

.slideshow {
  height: auto;
  width: 60%;
  float: left;
}
.twitter {
  height: auto;
  width: 40%;
  float: right;
}
.css-slideshow {
  position: relative;
  max-width: auto;
  height: 80%;
  margin: 5% 5% 0 5%;
  font-family: "Montserrat", sans-serif;
  font-weight: 300;
}
.css-slideshow figure {
  margin: 0 0 0 0;
  width: 100%;
  height: 100%;
  background: #fff;
  position: absolute;
}
.css-slideshow img {
  height: 100%;
  width: 100%;
  -webkit-box-shadow: 0 0 2px #666;
  box-shadow: 0 0 2px #666;
}

<div class="wrapper">
  <div class="slideshow">
    ...put your slideshow here...
  </div>
  <div class="twitter"></div>
</div>

看看this。

HTML 为什么这个锁向左？

HTML why does this lock to the left?

html

css

position

HTML 为什么这个锁向​​左？

HTML why does this lock to the left?

html

css

position

HTML 为什么这个锁向左？