旋转木马共享行 - 水平

我试图让我的旋转木马可以与其他文本共享一个水平行，但它不工作，因为某些原因，当它设置为40％时占用100％的宽度。旋转木马共享行 - 水平

我会在下面发布代码和截图。

enter image description here

在上面的图片，它显示了其下的文本旋转木马，但我希望文本是它的旁边。

当我使用Chrome的开发工具包，它表明，保证金占用了全行的右侧，但我不相信它说的是，在代码d的任何地方：

代码：

<div style="border:2px solid #cecece;margin-left:7%;margin-top:3%;margin-right:7%;padding:1%;"> 
    <div id="carousel-example-generic" class="carousel slide span4" data-ride="carousel" style="margin:0px !important;"> 
     <!-- Indicators --> 
     <ol class="carousel-indicators"> 
     <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> 
     <li data-target="#carousel-example-generic" data-slide-to="1"></li> 
     <li data-target="#carousel-example-generic" data-slide-to="2"></li> 
     </ol> 

     <!-- Wrapper for slides --> 
     <div class="carousel-inner"> 
     <div class="item active"> 
      <img src="http://images.eurogamer.net/2013/usgamer/league_of_legends.jpg" alt="..."> 
      <div class="carousel-caption"> 
      League of Legends 
      </div> 
     </div> 
     <div class="item"> 
      <img src="http://assets1.ignimgs.com/vid/thumbnails/user/2013/09/03/minecraft.jpg" alt="..."> 
      <div class="carousel-caption"> 
      Minecraft 
      </div> 
     </div> 
     <div class="item"> 
      <img src="http://www.gamerheadlines.com/wp-content/uploads/2013/11/135.jpg" alt="..."> 
      <div class="carousel-caption"> 
      Call of Duty: Ghosts 
      </div> 
     </div> 
     </div> 
     </div> 
    <div class="span5"> 
     <p>Test</p> 
    </div> 
    </div> 
</div>

CSS：

.carousel{width:40% !important;} 
.carousel .slide { 
    width:40% !important; 
}

来源

2013-12-15 user3023566

添加你的CSS代码会很有帮助。 – SquareCat

对不起，我忘了，我现在将它添加:) – user3023566

A div如果没有其他说明，元素将显示为块元素。除非另有规定，否则此块将填充已提供宽度或从文档中元素的逻辑顺序派生的下一个外部容器的整个宽度。

你的外部包装div（#carousel-example-generic）设定为类名（和.carousel .slide顺便说一句，重叠，所以一个定义并足够了），因此的40%一个width通过CSS定义应用。如果您按照其他用户的建议删除了width，然后将display:inline-block应用于您的轮播包装，则之后再添加一个div，该值也设置为display:inline-block，最后得到两个元素相邻。

See this fiddle for a demonstration

请注意：我添加外部包装，以便更清楚它给你，为什么它的工作原理以及它是如何实现的。

另请注意，虽然inline-block现在得到广泛支持，但仍有一些旧的浏览器仍然存在，它们在CSS属性方面存在问题。

Refer to this page to learn more about browser compatibility

如果你想利用你可以选择float两个div元素彼此相邻，但要注意，你必须clear the floats，如果你不希望任何相邻元素旁边出现一个更安全的路线到你的div。

来源

2013-12-15 01:19:39 SquareCat

我想这两个建议，他们没有工作：/但是我相信，我知道你的意思，其中的问题源于什么。任何其他想法如何我可以修复？你想让我做一个jsFiddle的文件吗？ – user3023566

你能提供一个小提琴，包括你的整个CSS代码吗？ – SquareCat

当然，你走了！ http://jsfiddle.net/ZhcLN/ – user3023566

看来，这是造成边境的事情，那就是100％。

你能改变这个没有ID或类的div吗？

如果可能，只需在此div内加宽度：40％。

<div style="width: 40%; border:2px solid #cecece;margin-left:7%;margin-top:3%;margin-right:7%;padding:1%;">

来源

2013-12-15 01:18:25 CRABOLO

不能这样做，该div只是为了在这两个元素周围放置一个边框。 – user3023566

旋转木马共享行 - 水平

回答

相关问题