我的div不对齐

Question

我有一个div class =“first-div”和两个div标签。我试图做两个div对齐。

我的代码是在这里： - 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类= “第一格” 宽度100％，这需要宽以前的容器类（宽度：1200px）。

使用代码来对齐div 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; 
} 

Working Bin