如何在此代码中仅使用 CSS 垂直对齐 html 单选按钮？

Question

I found this cool Css-only slideshow with thumbnails for my application here . I have been trying to play around with the code to align the thumbnails vertically on the right instead of horizontally at the bottom without success...

The big picture needs to be 640px(x)640px:

    /*Time for the CSS*/
* {margin: 0; padding: 0;}
body {background: #ccc;}

.slider{
    width: 640px; /*Same as width of the large image*/
    position: relative;
    /*Instead of height we will use padding*/
    padding-top: 640px; /*That helps bring the labels down*/

    margin: 100px auto;

    /*Lets add a shadow*/
    box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.75);
}


/*Last thing remaining is to add transitions*/
.slider>img{
    position: absolute;
    left: 0; top: 0;
    transition: all 0.5s;
}

.slider input[name='slide_switch'] {
    display: none;
}

.slider label {
    /*Lets add some spacing for the thumbnails*/
    margin: 18px 0 0 18px;
    border: 3px solid #999;

    float: left;
    cursor: pointer;
    transition: all 0.5s;

    /*Default style = low opacity*/
    opacity: 0.6;
}

.slider label img{
    display: block;
}

/*Time to add the click effects*/
.slider input[name='slide_switch']:checked+label {
    border-color: #666;
    opacity: 1;
}
/*Clicking any thumbnail now should change its opacity(style)*/
/*Time to work on the main images*/
.slider input[name='slide_switch'] ~ img {
    opacity: 0;
    transform: scale(1.1);
}
/*That hides all main images at a 110% size
On click the images will be displayed at normal size to complete the effect
*/
.slider input[name='slide_switch']:checked+label+img {
    opacity: 1;
    transform: scale(1);
}

Answer 1

To get them vertically aligned, remove the .slider label float:left; . You will need to play around with the border and position CSS but that should be simple. Hope this helped.

Answer 2

I have modified a few elements in Chrome to get the requested view. Just modify the following CSS, you will have the radio slider on the left, image on the right. You have the transform: scale to get the correct size.

.slider {
      width: 640px;
      position: relative;
      /* padding-top: 320px; Remove the padding top */
      margin: 100px auto;
      box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.75);
    }

.slider input[name='slide_switch'] ~ img {
  opacity: 0;
  transform: scale(0.5);
  margin-left: 120px; /* Push the image to the right side.*/
}