旋轉木馬共享行 - 水平

我試圖讓我的旋轉木馬可以與其他文本共享一個水平行，但它不工作，因爲某些原因，當它設置爲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

旋轉木馬共享行 - 水平

回答

相關問題