CSS使2個div並排浮動的問題

我希望2個div位於容器div內並排顯示。然而第二個包裝出於某種原因。第二個div宣傳片在第一個div幻燈片的下方和右側。邊緣似乎是正確的，但我希望這兩個div並排出現。CSS使2個div並排浮動的問題

我試過這裏的一些建議，但他們不工作。

這裏是CSS：

#top-feature { 
background: red; 
height: 320px; 
width: 897px; 
margin: 11px 0 0 0; 
/*padding: 10px 0 0 10px;*/ 
position: relative; 
text-align: left; 
} 

#slideshow { 
height: 300px; 
width: 548px; 
margin: 0 0 0 0; 
background: blue; 
} 

#promo { 
height: 100px; 
width: 200px; 
margin: 0 0 0 569px; 
background: green; 
}

下面是HTML：

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent"> 
    <div id="top-feature"> 
     <div id="slideshow"> 
     </div> 
     <div id="promo"> 
     </div> 
    </div> 
</asp:Content>

來源

2011-02-03 Paul

您需要浮動，內聯或立場：絕對的內在的div，如果你希望他們並排側。一個「正常」div是一個塊對象，強制下面的內容出現在它下面。

來源

2011-02-03 02:54:04 SpliFF

我試圖做到這一點，但沒有奏效。幻燈片向左浮動，促銷向右浮動。 – Paul 2011-02-03 02:56:38

但您是否首先刪除了促銷中的569px保證金？ – SpliFF 2011-02-03 02:58:30

所以我不能使用利潤與浮動？佩塔的解決方案似乎可行，但我想我也需要使用邊際。 – Paul 2011-02-03 03:03:11

使用float CSS屬性

#top-feature { 
    background: red; 
    height: 320px; 
    width: 897px; 
} 

#top-feature div { 
    float: left; 
} 

#slideshow { 
    height: 300px; 
    width: 548px; 
    background: blue; 
} 

#promo { 
    background: green; 
    height: 100px; 
    width: 200px; 
}

參見：http://www.jsfiddle.net/K64vZ/

來源

2011-02-03 02:56:15 Petah

首先要確保浮動，或者你也可以使用絕對位置：

#slideshow { 
height: 300px; 
width: 548px; 
margin: 0 0 0 0; 
background: blue; 
float: left; 
} 

#promo { 
height: 100px; 
width: 200px; 
margin: 0 0 0 569px; 
background: green; 
float: left; 
}

然後確保你有一些在每個div中的內容。

來源

2011-02-03 02:56:44 BMitch

其實你不需要任何特殊的樣式來實現它，它是默認的CSS屬性。

兩個div將始終並排，直到兩個div的總寬度不超過容器div或者您明確使用clear：both;與第一個div。下面是一個例子：

#outerdiv { 
    width:500px; 
    height:300px; 
} 
#innerdiv1 { 
    width:200px; 
    height:300px; 
    float:left; 
} 
#innerdiv2 { 
    width:300px; 
    height:300px; 
}

如果尚未指定任何邊界，這些將被並排顯示，但如果指定邊框/填充/利潤率等你必須再調節的內寬度divs相應。

來源

2013-02-17 13:53:31 RohitG

CSS使2個div並排浮動的問題

回答

相關問題