如何讓我的佈局工作的這一部分？

Question

我如何使這部分佈局工作成爲可能？

我無法弄清楚如何解決這個問題。它變得如此混亂和混亂。

<div style='width: 900px; margin:0 auto'><div style='float: left; width: 312px; height: 197px; background-color: #A857BC'></div> 
    <div style='float: left; width: 249px; height: 197px; background-color: #FF80C0'></div> 
    <div style='float: left; width: 339px; height: 197px; background-color: #8C83FC'></div> 
    </div><div style='margin:50px;background-color: #99CCCC; margin-top:-150px;height:100px; '>this should be in the middle</div> 

</div> 

    <div style='width: 900px; margin:0 auto'><div style='float: left; width: 362px; height: 197px; background-color: #A857BC'></div> 
    <div style='float: left; width: 147px; height: 197px; background-color: #FF80C0'></div> 
    <div style='float: left; width: 391px; height: 197px; background-color: #8C83FC'></div> 
    </div><div style='margin:50px;background-color: #99CCCC; margin-top:-150px;height:100px; '>this should be in the middle</div> 
</div> 

Answer 1

你有一些流浪的關閉</div>標籤在那裏，確保它們是平衡對。

Answer 2

馬上就要加入外部樣式表。這會讓你的生活更輕鬆。看我下面的例子。

http://jsfiddle.net/kSxrK/2/

能否請您詳細解釋一下你正在試圖完成的任務。我看到文字沒有出現 - 但你想要什麼？

Answer 3

<div style='width: 900px; margin:0 auto'> 
    <div style='float: left; width: 312px; height: 197px; background-color: #A857BC'></div> 
    <div style='float: left; width: 249px; height: 197px; background-color: #FF80C0'></div> 
    <div style='float: left; width: 339px; height: 197px; background-color: #8C83FC'></div> 
</div> 
<div style='margin:50px;background-color: #99CCCC; margin-top:-150px;height:100px; '>this should be in the middle</div> 

<div style='width: 900px; margin:0 auto'> 
    <div style='float: left; width: 362px; height: 197px; background-color: #A857BC'></div> 
    <div style='float: left; width: 147px; height: 197px; background-color: #FF80C0'></div> 
    <div style='float: left; width: 391px; height: 197px; background-color: #8C83FC'></div> 
</div> 
<div style='margin:50px;background-color: #99CCCC; margin-top:-150px;height:100px; '>this should be in the middle</div> 

或

<div style='width: 900px; margin:0 auto'> 
    <div style='float: left; width: 312px; height: 197px; background-color: #A857BC'></div> 
    <div style='float: left; width: 249px; height: 197px; background-color: #FF80C0'></div> 
    <div style='float: left; width: 339px; height: 197px; background-color: #8C83FC'></div> 
    <div style='margin:50px;background-color: #99CCCC; margin-top:-150px;height:100px; '>this should be in the middle</div> 
</div> 

<div style='width: 900px; margin:0 auto'> 
    <div style='float: left; width: 362px; height: 197px; background-color: #A857BC'>  </div> 
    <div style='float: left; width: 147px; height: 197px; background-color: #FF80C0'></div> 
    <div style='float: left; width: 391px; height: 197px; background-color: #8C83FC'></div> 
    <div style='margin:50px;background-color: #99CCCC; margin-top:-150px;height:100px; '>this should be in the middle</div> 
</div> 

取決於你試圖完成什麼。

Answer 4

該代碼是可笑的雜亂 - 額外的結束標籤，內聯樣式，重複樣式，不一致的縮進。此外，你使用單引號 - 雖然沒有什麼不對，雙引號更常見。你應該在你的問題中包含一張照片。

這是我最好的猜測，你正在努力去做什麼。

<div style="width:900px; margin:0 auto; position:relative; height:197px"> 
    <div style="float:left; width:312px; height:100%; background-color:#a857bc"></div> 
    <div style="float:left; width:249px; height:100%; background-color:#ff80c0"></div> 
    <div style="float:left; width:339px; height:100%; background-color:#8c83fc"></div> 
    <div style="background-color: #9cc; position:absolute; top:50px; bottom:50px; left:50px; right:50px">this should be in the middle</div> 
</div> 
<div style="width:900px; margin:0 auto; position:relative; height:197px"> 
    <div style="float:left; width:362px; height:100%; background-color:#a857bc"></div> 
    <div style="float:left; width:147px; height:100%; background-color:#ff80c0"></div> 
    <div style="float:left; width:391px; height:100%; background-color:#8c83fc"></div> 
    <div style="background-color: #9cc; position:absolute; top:50px; bottom:50px; left:50px; right:50px">this should be in the middle</div> 
</div> 

您應該聽取關於使用內聯樣式的其他答案/評論。