我的潜水方向不对

Question

我有一个div class="first-div"和两个div标签在里面。我想同时做div align.

我的代码在这里:-HTML代码

<div class="first-div">
      <div id="myCarousel" class="carousel slide">
        <div class="carousel-inner">
          <div class="item active">
            <img src="img/featured/1.jpg" alt="">
            <div class="carousel-caption">
              <h4>First Thumbnail label</h4>
              <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
            </div>
          </div>
          <div class="item">
            <img src="img/featured/2.jpg" alt="">
            <div class="carousel-caption">
              <h4>Second Thumbnail label</h4>
              <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
            </div>
          </div>
        </div>
        <a class="left carousel-control" href="#myCarousel" data-slide="prev"><img src="img/arrow.png" alt="Arrow"></a>
        <a class="right carousel-control" href="#myCarousel" data-slide="next"><img src="img/arrow2.png" alt="Arrow"></a>
      </div>
     <div class="ad-space">
    <img src="img/Cinderella.jpg" height="210px" width="360px" alt="ad-space">
    </div>
    </div>

CSS代码

  .carousel {
  position: relative;
   width:796px;

  line-height: 1;
  -moz-box-shadow: 2px 2px 2px #888;
  -webkit-box-shadow: 10px 10px 5px #888;
   box-shadow: 0 2px 2px #7d7d7d;
  }
  .first-div{
   position: relative;
   width:100%;
   margin-bottom: 18px;
   margin-top:15px;
   line-height: 1;
   }
  .ad-space{
   position: relative;
   height:220px;
   float:right;
   padding-left:3px;

    }
   .carousel-inner {
    position: relative;
     width: 100%;
     overflow: hidden;
     }
    .carousel .item {
    position: relative;
     display: none;
     -webkit-transition: 0.6s ease-in-out left;
         -moz-transition: 0.6s ease-in-out left;
        -ms-transition: 0.6s ease-in-out left;
          -o-transition: 0.6s ease-in-out left;
             transition: 0.6s ease-in-out left;
         }
  .carousel .item > img {
     display: block;
      line-height: 1;
      }
    .carousel .active,
    .carousel .next,
    .carousel .prev {
     display: block;
        }
     .carousel .active {
          left: 0;
         }
      .carousel .next,
      .carousel .prev {
       position: absolute;
       top: 0;
       width: 100%;
        }
    .carousel .next {
     left: 100%;
       }
    .carousel .prev {
    left: -100%;
      }
     .carousel .next.left,
     .carousel .prev.right {
        left: 0;
        }
       .carousel .active.left {
         left: -100%;
          }
          .carousel .active.right {
           left: 100%;
            }
          .carousel-control {
           position: absolute;
          top: 40%;
          left: 15px;
          width: 40px;
          height: 40px;
          opacity: 0.3;
            filter: alpha(opacity=30);
            }
          .carousel-control.right {
          right: 15px;
           left: auto;
           }
         .carousel-control:hover {
         opacity: 1;
         filter: alpha(opacity=75);
           }
         .carousel-caption {
        position: absolute;
        right: 0;
         bottom: 0;
          left: 0;
         padding: 10px 15px 5px;
          background: #333333;
          background: rgba(0, 0, 0, 0.75);
         }
        .carousel-caption h4,
        .carousel-caption p {
         color: #ffffff;
          }

这是一个响应式模板，所以我设置div class="first-div" width为100%，取前一个容器类的宽度(width:1200px)

使用代码在div class="first-div"内对齐两个div。

Answer 1

只需将.carousel类属性更改为以下内容:

.carousel {
    position: absolute;
    top:0;
    left:0;
    right:363px;  /* 350px + 3px (width + padding) of .ad-space class */
    line-height: 1;
    -moz-box-shadow: 2px 2px 2px #888;
    -webkit-box-shadow: 10px 10px 5px #888;
    box-shadow: 0 2px 2px #7d7d7d;
}

工作本