Html 尝试在中间的左边表格中获取照片，在右边获取文本。

我不熟悉css/html/javascript，我正试图找到一种方法，在表单的左侧获取一张照片，并在表单的右侧添加文本。为了不打扰你们，我试着摆弄一下，但我似乎弄不明白。在这一点上，我有在右边的文字，但当我试图添加一张照片到左边，它没有工作。它要么在我的表单上方，要么在表单的左侧，然后我的文本在顶部。形式的变化

以下是我正在使用的一些代码： 接触面积{

margin-left: auto;
margin-right: auto;
width: 490px;
padding:0;
}
#contact-area input, #contact-area textarea {
float:left;
clear:both;
font-family:"ledger-regular";
padding: 5px;
width: 480px;
margin: 0px 0px 10px 0px;
font-size: 1.4em;
border: 1px solid black;
border-radius: 3px;
}

#contact-area textarea {
height: 90px;
}

#contact-area textarea:focus, #contact-area input:focus {
outline:none;
border: 2px solid #D7B740;
}

#contact-area input.submit-button {
border-radius: 3px;
border-color:#D7B740;
background-color:#D7B740;
width: 493px;
}
#rightinfo {
text-align: center;
font-family:"ledger-regular";
padding:0;
margin-top:10px;
margin-bottom:0px;
margin-left: auto;
margin-right: auto;
}
#rightinfo{ 
text-align: center;
font-family:"ledger-regular";
padding:0;
margin-top:10px;
margin-bottom:10px;
}
#socmed img{
display: inline-block;
margin-left:auto;
margin-right: auto;
height: 45px;

}

html:

假日时间

星期一至五：上午10时至下午6时

星期六：上午10时至下午4时

星期日：上午12点至下午4点

---

提前谢谢你的帮助。这里的每个人最近都非常乐于助人

首先，请确保在HTML顶部添加以下内容：

<div class="photo-left">
  <img src="https://media2.5amily.com/prev_cache/60830a68cb8bf288482104d220318cda5831f7bf.jpg" class="illustration">
</div>

如果你不想要罗得岛幽默的杯子，选择另一个图像文件。如果仍然不起作用，可能会在整个容器DIV中添加一个宽度：100%（如果还没有，则添加一个），和/或将其他两列的宽度也更改为33%

---

祝你好运

首先，确保在HTML的顶部添加以下内容：

<div class="photo-left">
  <img src="https://media2.5amily.com/prev_cache/60830a68cb8bf288482104d220318cda5831f7bf.jpg" class="illustration">
</div>

如果你不想要罗得岛幽默的杯子，选择另一个图像文件。如果仍然不起作用，可能会在整个容器DIV中添加一个宽度：100%（如果还没有，则添加一个），和/或将其他两列的宽度也更改为33%

---

祝你好运

首先，不要为两个元素放置相同的id。id在html文档中必须是唯一的

关于这个问题，对于一个完全初学者来说，最好的方法可能是使用一个好的框架，比如

让我解释一下你问题背后的原则。首先，您可以将html块包装成不同的div，并将它们按顺序排列。因此，它可能是：

<div id="contact-area">

    <div id="leftinfo" class="innerdivs">
            <a href="https://www.facebook.com/GendronsPawn/"><img id="socmed"src="../images/facebook.png"
            onmouseover="this.src='../images/facebookclicked.png'" onmouseout="this.src='../images/facebook.png'" alt="facebook"/></a>
            <a href="http://stores.ebay.com/Gendron-s-Jewelry-and-Pawn?_rdc=1"><img id="socmed"src="../images/ebay.png"
                onmouseover="this.src='../images/ebayclicked.png'" onmouseout="this.src='../images/ebay.png'" alt="ebay"/></a>
    </div>

    <div id="forminfo"  class="innerdivs">
        <form method="post" action="contactthanks.php">
                    <input type="text" name="Name" id="Name" placeholder="Name"/>
                    <input type="text" name="City" id="City" placeholder="City"/>
                    <input type="text" name="Email" id="Email" placeholder="Email" />
                    <textarea name="Message" rows="20" cols="20" id="Message" placeholder="Message"></textarea>
                    <input type="submit" name="submit" value="Submit" class="submit-button" />
                </div>
         </form>
    </div>

    <div id="rightinfo" class="innerdivs">
        <p>Holiday Hours</p>
        <p>Monday-Friday: 10am-6pm</p>
        <p>Saturday: 10am-4pm</p>
        <p>Sunday: 12am-4pm</p>
    </div>
</div>

请注意，float仅与宽度一起工作。这是以您想要的方式并排获得div的更简单的方法

---

最后一条规则是不要对重复的元素使用id-css规则。请注意我为此创建类（innerdivs）的方式。

首先，不要为两个元素放置相同的id。id在html文档中必须是唯一的

关于这个问题，对于一个完全初学者来说，最好的方法可能是使用一个好的框架，比如

让我解释一下你问题背后的原则。首先，您可以将html块包装成不同的div，并将它们按顺序排列。因此，它可能是：

<div id="contact-area">

    <div id="leftinfo" class="innerdivs">
            <a href="https://www.facebook.com/GendronsPawn/"><img id="socmed"src="../images/facebook.png"
            onmouseover="this.src='../images/facebookclicked.png'" onmouseout="this.src='../images/facebook.png'" alt="facebook"/></a>
            <a href="http://stores.ebay.com/Gendron-s-Jewelry-and-Pawn?_rdc=1"><img id="socmed"src="../images/ebay.png"
                onmouseover="this.src='../images/ebayclicked.png'" onmouseout="this.src='../images/ebay.png'" alt="ebay"/></a>
    </div>

    <div id="forminfo"  class="innerdivs">
        <form method="post" action="contactthanks.php">
                    <input type="text" name="Name" id="Name" placeholder="Name"/>
                    <input type="text" name="City" id="City" placeholder="City"/>
                    <input type="text" name="Email" id="Email" placeholder="Email" />
                    <textarea name="Message" rows="20" cols="20" id="Message" placeholder="Message"></textarea>
                    <input type="submit" name="submit" value="Submit" class="submit-button" />
                </div>
         </form>
    </div>

    <div id="rightinfo" class="innerdivs">
        <p>Holiday Hours</p>
        <p>Monday-Friday: 10am-6pm</p>
        <p>Saturday: 10am-4pm</p>
        <p>Sunday: 12am-4pm</p>
    </div>
</div>

请注意，float仅与宽度一起工作。这是以您想要的方式并排获得div的更简单的方法

最后一条规则是不要对重复的元素使用id-css规则。请注意我为此创建类（innerdivs）的方式

#contact-area .innerdivs{float:left;width:33%;}