html - 私のdivは整列していません

Question

div class="first-div" とその中に 2 つの 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 class="first-div" width を 100% に設定して、前のコンテナー クラスの幅 (幅: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;
}

ワーキングビン