浮動div不能正確浮動

這是我在這裏的第一篇文章，因爲我在我的智慧結尾，所以想我會跳進去，並最終尋求一些幫助！浮動div不能正確浮動

我在我設計的網站上有一個「聯繫我們」部分，其中包含一段關於我們的段落，電子郵件和電話。在它旁邊有一個我從php表單生成器獲得的電子郵件聯繫表單。一切都進行得順順當當，直到我在丟棄的壞小子

Anywho，這裏是我的聯繫我們「包裝」代碼：

#contact { 
background-image:url(img/contact_bg.jpg); 
background-repeat: no-repeat; 
width: 820px; 
height: 459px; 
margin: 25px 70px 50px 70px; 
clear: both; 
} 

#thanks { 
width: 324px; 
height: 100px; 
padding-top: 35px; 
} 

#thanks span { 
    font-size: 1.5em; 
    font-weight: normal; 
    font-style: italic; 
    letter-spacing:1px; 
    color: #ffffff; 
    text-shadow: 1px 1px 1px #000000; 
    text-decoration: none; 
    padding: 0 0 0 25px; 
} 

#details { 
width: 324px; 
height: 63px; 
padding-top: 25px; 
clear: both; 
    } 

#details span { 
font-size: 1.115em; 
font-weight: normal; 
font-style: italic; 
letter-spacing:1px; 
color: #ffffff; 
text-shadow: 1px 1px 1px #000000; 
text-decoration: none; 
padding: 0 0 0 25px; 
clear: both; 
} 

#about { 
width: 324px; 
clear: both; 
} 

#about h2 { 
font-size: 1.618em; 
font-weight: normal; 
letter-spacing:1px; 
color: #ffffff; 
text-shadow: 1px 1px 1px #000000; 
padding-left: 25px; 
text-decoration: none; 
clear: both; 
} 

#about span { 
font-size: 1em; 
font-weight: normal; 
letter-spacing:1px; 
color: #ffffff; 
text-shadow: 1px 1px 1px #000000; 
line-height: 14px; 
text-decoration: none; 
padding: 10px 0 0 25px; 
clear: both; 
}

，這裏是我的表單的CSS：

#form { 
    margin:0 auto; 
    text-align:left; 
    width:391px; 
    height: 459px; 
    float: right; 
    } 

    form.appnitro { 
    margin:20px 20px 0; 
    padding:0 0 20px; 
    }

這裏是一些截圖：

這就是它應該是這樣的： expected 這是它現在看起來像什麼:( actual

任何幫助非常感謝，如果您需要任何更多的信息，請讓我知道。

非常感謝！

來源

2012-01-09 Diginate

您可以發佈你的標記呢？或者一個實際的鏈接，我們可以看到我們自己？ – Brandon 2012-01-09 22:37:53

您的#thanks或您的#about已浮動，因此您的聯繫表單雖然已浮動，但仍顯示在其下。您需要浮動#thanks和#aboutfloat:left。

您也有很多clear:both這將重置文檔流可能導致您看到的一些問題。儘管沒有看到實際的HTML，但很難說。

來源

2012-01-09 22:42:47 idrumgood

謝謝，我會嘗試糾正這一點，只要我回到我的代碼前面。 – Diginate 2012-01-10 09:15:55

這裏是整個網站：http：//nathanlangley.co.uk/main_site_2/index.html還有很多摺痕燙出 – Diginate 2012-01-12 12:05:21

啊哈！這工作！謝謝！ – Diginate 2012-01-12 12:14:33

所有你需要做的就是把另一個股利周圍的左手內容和漂浮它留下，像這樣

<div style="float:left"> 
    <div id="thanks"> 
     <span>Thank you for your interest in Dan James construction. Please contact us using a method convenient for you.</span> 
    </div> 

    <div id="details"> 
     <span>Tel: 07749 121959</span> 
     <span>Email: [email protected]</span> 
    </div> 

    <div id="about"> 
     <h2>ABOUT US</h2> 
     <span>Dan James construction are specialists in loft 
conversion based in North London and covering the whole of the M25 area.</span><span>We guide you through every stage of your 
development journey, right from the no obligation FREE estimate to the fine finishing touches.</span><span>So whether you're looking for more space or looking to add value get in touch today to start your very own conversion</span> 
    </div> 

</div>

這應該工作，讓我知道如何去;-)

來源

2012-01-09 22:46:30 adamhuxtable

哈哈！謝謝廣告！：D我明天會試試！ – Diginate 2012-01-10 09:18:26

哦，快點好起來！ – Diginate 2012-01-10 09:28:48

浮動div不能正確浮動

回答

相關問題