html - div 元素和图像未对齐

Question

我正在创建一个灯箱。为此，我需要一个带有评论的框，该框位于实际图像的右侧。

但是，我不知道如何让评论框从图片顶部开始，到图片底部结束。

我整理了一个 JSFiddle这说明了问题。下面是相同的代码。

.lightbox-container .lightbox {
  position: fixed;
  z-index: 99991;
  width: 100%;
  height: 100%;
  padding: 40px;
  top: 0px;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.7);
}


.lightbox-container .lightbox span {
  color: white;
  font-size: 22px;
  padding: 20px;
  cursor: pointer;
  display: inline;
}


.lightbox-container .lightbox img {
  max-height: 100%;
  display: inline;
  cursor: pointer;
    opacity: .5;
}

.lightbox-container .lightbox .lightbox-comments {
  width: 200px;
  height: 500px;
  background-color: red;
  color: white;
  display: inline-block;
  text-align: left;
}

<link rel="stylesheet" type="text/css" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">


<div class="lightbox-container">
    <div class="lightbox">
        <span class="icon ion-chevron-left"></span>

        <img src="http://fakeimg.pl/600x800/?text=Picture" />
        <div class="lightbox-comments">
            A comments box
        </div>
        
        <span class="icon ion-chevron-right"></span>
    </div>
</div>

我怎样才能做到这一点？

Answer 1

您应该尝试在您的评论框中使用顶部和底部为 0 的绝对定位。但是您还需要一个包装图像和具有相对位置的评论框。

您可以在下面看到一个片段。

希望对您有所帮助。

.lightbox-container .lightbox {
  position: fixed;
  z-index: 99991;
  width: 100%;
  height: 100%;
  padding: 40px;
  top: 0px;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.7);
}

/*ADDED*/
.lightbox-container .lightbox .wrapper {
    position:relative;
    display:inline-block;
}
/*/ADDED*/

.lightbox-container .lightbox span {
  color: white;
  font-size: 22px;
  padding: 0;
  cursor: pointer;
  display: inline;
}


.lightbox-container .lightbox img {
  max-height: 100%;
  max-width:100%; /*ADDED*/
  display: block;/*Changed to avoid small margin bellow the image*/
  cursor: pointer;
    opacity: .5;
}

.lightbox-container .lightbox .lightbox-comments {
  position:absolute; top:0; bottom:0; right:0; /*ADDED*/
  width: 200px;
  /*height: 500px;*/
  background-color: red;
  color: white;
  display: inline-block;
  text-align: left;
}

<div class="lightbox-container">
    <div class="lightbox">
        <span class="icon ion-chevron-left"></span>
        <!--Wrapper added-->
        <div class="wrapper">
        <img src="http://fakeimg.pl/600x800/?text=Picture" />
        <div class="lightbox-comments">
            A comments box
        </div>
        </div>
        <span class="icon ion-chevron-right"></span>
    </div>
</div>