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的绝对定位。但是你还需要一个围绕图像的包装器和一个具有相对位置的注释框。

你可以看到一个片段。

希望它有所帮助。

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 2

将所有儿童置于.lightbox-container .lightbox inline-block内，然后将其添加到样式表中，将其垂直对齐：

.lightbox-container .lightbox > * {
     vertical-align: middle;
}

您还需要将.lightbox-container .lightbox .lightbox-comments的高度更改为100％才能获得动态高度。

Updated Fiddle

div元素和图像未对齐

2 个答案: