圖像和表單之間的HTML/CSS文本段落

Question

我一直試圖弄清楚這一點現在一段時間，我認爲我的頭會爆炸，如果我一直試圖找出我自己的。

我試圖做一些非常簡單的事情，但我沒有運氣。我基本上試圖在圖像和表單之間有一個標題和段落。

這是它看起來像現在：http://tinypic.com/r/30rob3t/5

而這正是我試圖使它看起來像：http://tinypic.com/r/30wpdti/5

這裏是相關的代碼： HTML：

<div id="content_section4"> 
<p><img class="round" src="images/image5.jpg" alt="image1" height=175 width=175/></p> 
<h1 id="connect">Connect</h1> 
<div id="connect">blah blah blha blah joiefje blah blah blahblah blah balah I suck at html I hate my life 
blah blah blah I have a cat blah blah blah blah blah blah blah eu2398re23ioj</div> 

<!--contact form here--> 
    <div id="contact"> 
    <br> 
    <form action="MAILTO:blah@blah.com" method="POST" enctype="text/plain"> 
     <input name="name" type="text" value="Name" size="40" onclick="this.value = '';"/> <br><br> 
     <input name="email" type="text" value="Email" size="40" onclick="this.value = '';"/> <br><br> 
     <textarea name="message" rows="10" cols="33" type="text" style="overflow:auto;resize:none" />Message</textarea> <br><br> 
     <input type="submit" value="Send email"/> 
    </form></div> 
</div><!--end contact_section4--> 

而CSS：

#content_section4 { 

float: left; 

text-align: justify; 

padding-left: 20px; 

} 

#content_section4 img { 

float: left; 

} 

#connect { 

width: 425px; 

padding-left: 205px; 

} 

#contact { 

float:right;  

} 

我沒有大量的網頁設計經驗，而且我一直在爲此煩惱幾個小時。任何幫助是極大的讚賞=）

Answer 1

你的HTML將是這樣的..

<div id="content_section4"> 
<div id="content_left"> 
<p><img class="round" src="images/image5.jpg" alt="image1" height=175 width=175/></p> 
<h1 id="connect">Connect</h1> 
<div id="connect">blah blah blha blah joiefje blah blah blahblah blah balah I suck at html I hate my life 
blah blah blah I have a cat blah blah blah blah blah blah blah eu2398re23ioj</div> 
</div> 
<!--contact form here--> 
    <div id="contact"> 
    <br> 
    <form action="MAILTO:blah@blah.com" method="POST" enctype="text/plain"> 
     <input name="name" type="text" value="Name" size="40" onclick="this.value = '';"/> <br><br> 
     <input name="email" type="text" value="Email" size="40" onclick="this.value = '';"/> <br><br> 
     <textarea name="message" rows="10" cols="33" type="text" style="overflow:auto;resize:none" />Message</textarea> <br><br> 
     <input type="submit" value="Send email"/> 
    </form></div> 
</div> 

和你的CSS將是這樣的..

#content_section4 { 
float: left; 

text-align: justify; 

padding-left: 20px; 

} 

#content_section4 img, #content_left { 

float: left; 

} 

#connect { 

width: 425px; 

padding-left: 205px; 

} 

#contact { 

float:right;  

} 

享受其中的樂趣..