css - 使用 Bootstrap 在 ng-show 之后移动 Div

Question

我有以下内容:

当我点击右边的图片时，我得到以下信息:

两个框应该对齐，如第一张图片所示。

包含的div如下:

<div align="center" class="top-buffer">
    <div class="img-thumbnail">
      <img id="face-img" class="search-face" ng-src="{{faceImg}}">
    </div>
    <div class="overlaid img-thumbnail">
      <img id="face-img" class="search-face" ng-src="{{processedResults[selectedSearchResultIndex].img}}" ng-hide="showSearchResultDetails" ng-click="toggleSearchResultDetails()">

      <div class="search-face wrapword" ng-show="showSearchResultDetails" ng-click="toggleSearchResultDetails()">
        Name: <strong>{{processedResults[selectedSearchResultIndex].name}}</strong>
      </div>

      <span class="glyphicon glyphicon-info-sign overlayer text-primary" aria-hidden="true"></span>
    </div>
  </div>

自定义CSS如下:

.search-face {
    width: 100px;
    height: 100px;
}

.overlaid {
    position: relative;
}

.overlayer {
    position: absolute;
    top: 84px;
    left: 85px;
    text-shadow: 1px 1px #666666;
    color: white;
}

.wrapword {
    white-space: -moz-pre-wrap !important;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    white-space: pre-wrap;       /* css-3 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */
    white-space: -webkit-pre-wrap; /* Newer versions of Chrome/Safari*/
    word-break: break-all;
    white-space: normal;
}

.top-buffer { 
    margin-top: 10px; 
}

抱歉出现蓝色涂鸦!

我正在使用 Bootstrap 3.3.1

Answer 1

你的代码和 fiddle 不足以知道你想要完成什么，也许是这样的

<div align="center" class="top-buffer">
    <div class="col-sm-6 col-md-6 col-xs-6 text-right image-over">
        <div class="img-thumbnail">
            <img id="face-img" class="search-face" ng-src="{{faceImg}}">
        </div>
    </div>
    <div class="col-sm-6 col-md-6 col-xs-6 text-left image-over">
        <div class="overlaid img-thumbnail">
            <img id="face-img" class="search-face" ng-src="{{processedResults[selectedSearchResultIndex].img}}" ng-hide="showSearchResultDetails" ng-click="toggleSearchResultDetails()">

            <div class="search-face wrapword" ng-show="showSearchResultDetails" ng-click="toggleSearchResultDetails()">
                Name: <strong>{{processedResults[selectedSearchResultIndex].name}}</strong>
            </div>
          <span class="glyphicon glyphicon-info-sign overlayer text-primary" aria-hidden="true"></span>
        </div>
    </div>
</div>

工作 fiddle http://jsfiddle.net/52VtD/9314/

此外，如果您使用的是 Bootstrap ，请不要使用 align=center 根据 HTML5 CR，它也需要继续支持“过时的”功能，align=center 属性相当棘手。