2012-06-04 73 views
1

下面是我想要實現的圖像:http://i.imgur.com/XKPuV.png在Twitter Bootstrap中如何做一個簡單的內部容器?

我想要一個帶有邊框和灰色背景的內部容器的外部容器。在內部容器中有兩個塊:左側的文本,右側的圖像(兩側的元素不重要 - 可以是任何內容)。很基本的東西。

下面的代碼,我有我的兩個div,跨越6列分開(這是它看起來像:http://i.imgur.com/BEIVl.png)。解決此問題的最佳方法是什麼?

<div class="container" style="border: 1px solid gray;height:490px;margin-top:20px;"> 
<div id="inner-container" style="background:gray;margin:5px;"> 
    <div class="row"> 
     <div class="span6"> 
      <p style="margin:5px;"> 
       Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. 
      </p> 
     </div> 
     <div class="span6"> 
      <p style="margin:5px;"> 
       Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. 
      </p> 
     </div> 
    </div> 
</div> 

回答

0

的問題是,你不能指定行內邊距和補與SPANX類,因爲這些在覆蓋自舉自己的填充/保證金的設置(這就是爲什麼第二次DIV繼續下一行。 我建議你創建你所需要的,而不使用內部div的spanX定義。請參閱小提琴:http://jsfiddle.net/periklis/KGMEF/1/

+0

我看了一下你的示例代碼 - 兩個div分開,我正在尋找一個固體容器來容納他們都是。我在op上張了一張照片,所以你可以看到。 – Mike

+0

我放了一個邊緣他們,這就是爲什麼。我更新了小提琴,看看:http://jsfiddle.net/periklis/KGMEF/2/ – periklis

+0

謝謝,這看起來不錯。我甚至在更新之前將其標記爲答案,因爲我明白你要去哪裏。 – Mike

相關問題