图像和表单之间的HTML / CSS文本段落

Question

我一直在努力解决这个问题，我认为如果我不断尝试自己解决这个问题，我的头脑会爆炸。

我想做一些非常简单的事，但我没有运气。我基本上试图在图像和表单之间有一个标题和段落。

这就是它现在的样子：

这就是我想让它看起来像：

以下是相关代码：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:[email protected]" 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;
}

I don't have tons of experience in web design and I have been fussing with this for hours.  Any help is greatly appreciated =)

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:[email protected]" 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;    

}

享受其中的乐趣..