将元素排列在一起

时间:2018-01-10 16:17:45

标签: html css twitter-bootstrap

确保左侧的元素与右侧的框(桌面上)完美对齐的最佳方法是什么?现在底部似乎存在差距。似乎无法弄清楚......

jsfiddle here:https://jsfiddle.net/kqf6vubr/1/

<div class="row" style="margin-bottom: 5em;">
  <div class="col-sm-5 col-md-5" style="height: 300px">
    <div class="row">
      <div class="col-sm-4 col-md-4">
        <a href="#" class="thumbnail">
          <img src="http://placehold.it/275x275" class="img-responsive">
        </a>
      </div>
      <div class="col-sm-4 col-md-4">
        <a href="#" class="thumbnail">
          <img src="http://placehold.it/275x275" class="img-responsive">
        </a>
      </div>
      <div class="col-sm-4 col-md-4">
        <a href="#" class="thumbnail">
          <img src="http://placehold.it/275x275" class="img-responsive">
        </a>
      </div>
      <div class="col-sm-4 col-md-4">
        <a href="#" class="thumbnail">
          <img src="http://placehold.it/275x275" class="img-responsive">
        </a>
      </div>
      <div class="col-sm-4 col-md-4">
        <a href="#" class="thumbnail">
          <img src="http://placehold.it/275x275" class="img-responsive">
        </a>
      </div>
      <div class="col-sm-4 col-md-4">
        <a href="#" class="thumbnail">
          <img src="http://placehold.it/275x275" class="img-responsive">
        </a>
      </div>
    </div>
  </div>
  <div class="col-sm-7 col-md-7 panel-body" style="background-color: #ccc; padding: 2em">
    <h3 style="margin-top: 0px; margin-bottom: 1em">Brand Name</h3>
    <div class="row">
      <div class="col-sm-6 col-md-6">
        <div class="fluid-media">
          <iframe src="https://www.youtube.com/embed/QyIIeQbL1Zo" frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen></iframe>
        </div>
      </div>
      <div class="col-sm-6 col-md-6">
        Description text - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed molestie libero quis hendrerit blandit.
      </div>
    </div>
    <div class="row" style="margin-top: 1em; margin-left: 1px">
      { Watch Time } | { Views } | { Rating }
    </div>
  </div>
</div>

0 个答案:

没有答案