Question

我有一个Twitter引导程序轮播，其中有一个项目div with id="world_recipes"。在该项目中有两个div，我想并排放置div class="description"和div class="proj_image"。我试过应用float：left;对于孩子们，但是没有用。

<div id="my_carousel" class="carousel slide"><!-- class of slide for animation -->
          <div class="carousel-inner">
            <div id="world_recipes" class="item active"><!-- class of active since it's the first item -->
              <div class="description">
                Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
              </div>

              <div class="proj_image">
                <img src="http://placesheen.com/400/200">
              </div>

              <div class="carousel-caption">
                <p>Caption text here</p>
              </div>
            </div>
          </div><!-- /.carousel-inner -->
          <!--  Next and Previous controls below -->
          <a class="carousel-control left" href="#my_carousel" data-slide="prev">&lsaquo;</a>
          <a class="carousel-control right" href="#my_carousel" data-slide="next">&rsaquo;</a>
        </div>

谢谢！

Answer 1

您可以使用内联定位轻松解决此问题。

.description, .proj_image {
    display: inline-block;
    width: 50%;
}

但请注意，根据Css - two inline-block, width 50% elements don't stack，此解决方案需要更改您的DOM。你内联的两个块不能在它们之间有空格，因为inline-block保留完整，导致不希望的元素定位。

See this Jsfiddle for a working sample

Answer 2

尝试将父级div中的两个孩子div包裹在clearfix类中，制作一个float: left;，另一个float: right;，给它们两个基于百分比的宽度，加起来为100。

在twitter bootstrap轮播中并排放置div

2 个答案: