html - 试图在中间的左侧表格和右侧的文字上获取照片。

Question

我是 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:

<div id="contact-area">
            <form method="post" action="contactthanks.php">
            <div>
                <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">
            <p>Holiday Hours</p>
            <p>Monday-Friday: 10am-6pm</p>
            <p>Saturday: 10am-4pm</p>
            <p>Sunday: 12am-4pm</p>
        </div>
        <div id="rightinfo">
        <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>

提前感谢您的帮助。这里的每个人最近都非常有帮助

Answer 1

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

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

让我解释一下你的问题背后的原则。首先，您可以将 html block 包装到不同的 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>

然后，你可以在 CSS 中做:

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

请注意， float 只能与宽度一起使用。这是以您想要的方式并排获取 div 的更简单方法。

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