安排Div的標題

我試圖堆疊3個div並排。下面是一個示例的div安排Div的標題

<!-- This is first div --> 
<div id="divone" style="text-align: center;"> 
<span style="font-size: 11pt;"><strong>Some Message Here</strong></span> 
    <div style="text-align: center;"> 
    <form action="https://www.somesomesomesome.com" method="post"> 
    </form> 
    </div> 
</div> 
<!-- Similarly I need two more divs to be aligned sidebyside with div one -->

我如何使用內嵌 CSS做什麼呢？每個div的寬度可以是200px，對高度沒有限制。

輸出所需

-------------------- --------------------  -------------------- 
DIV ONE     DIV TWO      DIV THREE 
--------------------  --------------------  -------------------- 


FORM ELEMENT    FORM ELEMENT    FORM ELEMENT 

--------------------  --------------------  --------------------

來源

2012-12-04 Tom Hodder

爲什麼內嵌CSS？ – Kyle

不幸的是，主要的css文件不可訪問，我必須在沒有該文件的情況下對其進行測試。 –

1）你的例子只顯示兩個div 2）內聯css作爲你應該儘快放棄的習慣。即使主CSS不可訪問，您可以包含第二個CSS文件或使用樣式標籤。 – Christoph

<div id="divone" style="text-align: center; width:33.33333%; float:left;"> 
    <span style="font-size: 11pt;"><strong>Some Message Here</strong></span></div> 
    <div style="text-align: center;"> 
    <form action="https://www.somesomesomesome.com" method="post"> 
    </form> 
    </div> 

<div id="divtwo" style="text-align: center; width:33.33333%; float:left;"> 
    <span style="font-size: 11pt;"><strong>Some Message Here</strong></span></div> 
    <div style="text-align: center;"> 
    <form action="https://www.somesomesomesome.com" method="post"> 
    </form> 
    </div> 

<div id="divthree" style="text-align: center; width:33.33333%; float:left;"> 
    <span style="font-size: 11pt;"><strong>Some Message Here</strong></span></div> 
    <div style="text-align: center;"> 
    <form action="https://www.somesomesomesome.com" method="post"> 
    </form> 
    </div> 

    <div style="clear:both;"></div><!-- this is a clearfix div -->

DEMO：http://jsfiddle.net/EnkP5/

更新：我剛纔看到這裏你想要的寬度爲200像素;將寬度從33.33333％更改爲200px;

確保所有其他三個div都坐在上面的div寬度超過600px。

來源

2012-12-04 14:23:33 JCBiggar

你的三個div都共享一個id值。 – kwah

太棒了！我怎樣才能添加div邊框以及分隔每個div的邊框？ –

到每個div的內聯樣式，您可以添加'border：1px純黑色;'...我有點糊塗你的意思是由一個邊界分隔每個？除非你的意思是這樣的：http://jsfiddle.net/EnkP5/1/ – JCBiggar

套裝display: inline-block;有div這邊由端，如下所示：

<div id="divone" style="text-align: center; display: inline-block; width: 200px;"> 
<span style="font-size: 11pt;"><strong>Some Message Here</strong></span> 
    <div style="text-align: center;"> 
    <form action="https://www.somesomesomesome.com" method="post"> 
    </form> 
    </div> 
</div> 

<div id="divtwo" style="text-align: center; display: inline-block; width: 200px;"> 
<span style="font-size: 11pt;"><strong>Some Message Here</strong></span> 
    <div style="text-align: center;"> 
    <form action="https://www.somesomesomesome.com" method="post"> 
    </form> 
    </div> 
</div> 

<div id="divthree" style="text-align: center; display: inline-block; width: 200px;"> 
<span style="font-size: 11pt;"><strong>Some Message Here</strong></span> 
    <div style="text-align: center;"> 
    <form action="https://www.somesomesomesome.com" method="post"> 
    </form> 
    </div> 
</div>

來源

2012-12-04 14:24:19 kwah

如何定義寬度[min-width/width（％）/ width（px）/ width （em）]由您自行決定。 – kwah

只是因爲你不能改變的樣式，並不意味着你必須使用醜陋內嵌樣式。在頁上，然後

<style> 
.three-columns{ 
    width: 100%; /* or any width you like */ 
} 
.three-columns .column{ 
    float: left; 
    width: 33%; /* or less if you're using margins, padding, borders, etc */ 
} 
</style>

，

<div class="three-columns"> 
    <div class="column"></div> 
    <div class="column"></div> 
    <div class="column"></div> 
</div>

你可以在頭一個樣式標籤內所有的額外的CSS：

添加到您的<head>。（從技術上講，我認爲你可以使用它的頭外面，但儘量不要）

來源

2012-12-04 14:24:30 daveyfaherty

從理論上講，風格標籤只允許在頭部。實際上它也適用於車身標籤。HTML 5有一個新的屬性，通過將它們的相關規則僅應用於標記的子樹，使得這些樣式標記在主體中有效。它看起來像'

安排Div的標題

回答