/* Tells HTML5 to find the font-type-face that my OS has and then use that for heading 1
and also centers the first heading */
h1{
font-family:Arial, Helvetica, sans-serif;
text-align:center;
}
/* Tells HTML5 to use any of the font-types for my first paragraph in HTML source file
if one is not available. Also clears some white space
from the left margin of the paragraph and finally tells it to give that paragraph
a size of 20 pixels. */
p{
font-family:Arial, Helvetica, sans-serif;
padding: 20px;
font-size:20px;
}
/* Tells the language to find the only div tag and position it 0 pixels from
the top, 1.56 pixels to the right, and 1.88 pixels from the bottom. */
div{
padding: 0 25em 30em;
}
label{
float: left;
width: 11em;
text-align: right;
font-family:Arial, Helvetica, sans-serif;
}
input{
margin-left: 1em;
margin-bottom:.5em;
}
span{
color: red;
}
legend{
font-family:Arial, Helvetica, sans-serif;
}
/* All of the TextWrap classes are just for positioning and floating the four
same images around the form input information */
.Wrap1{
float:right;
margin:40px;
width:200px;
height:200px;
}
.Wrap2{
float:left;
margin:40px;
width:200px;
height:200px;
}<!DOCTYPE html>
<html>
<head>
<title>Cookie Order Form </title>
<link rel="stylesheet" href="Form_Design.css">
</head>
<body>
<h1>Cookie Order Form</h1>
<p>This form is a cookie order form for customers that purchased cookies from
Daron's Cookies Company and the following below must be filled out in order for each
customer to receive a final message that tells them when their order will be ready.</p>
<!--The customer will be sent to the HTML page named "submit form.html" after they
click the "Submit this Form" button. The code below does this. -->
<IMG class="Wrap1" SRC="cookie.gif" alt="cookie">
<IMG class="Wrap2" SRC="cookie.gif" alt="cookie2">
<div>
<form id="cookie_form" name="cookie_form" action="submit form.html method="get">
<fieldset>
<!-- Below sets the title of the form-->
<legend>Customer Order Form Information:</legend>
<!-- Creates the first left label to specify what should be placed in the text box
the the right of the label. The rest below does the same.-->
<label for="firstName">First Name:</label>
<input type="text" id="firstName" name="firstName">
<span id="firstname_error">*</span><br>
<label for="orderNumber">Order Number:</label>
<input type="text" id="orderNumber" name="orderNumber">
<span id="orderNumber_error">*</span><br>
<label for="date_of_order">Date of Order:</label>
<input type="text" id="date_of_order" name="date_of_order">
<span id="date_of_order_error">*</span><br>
<label for="email_address">Email Address:</label>
<input type="text" id="email_address" name="email_address">
<span id="email_address_error">*</span><br>
<label> </label>
<input type="button" id="form_submission" value="Submit this Form">
</fieldset>
</form>
</div>
</body>
</html>如何使用 css 使底部的两个图像(在图片中)位于顶部的两个图像下方而不影响 cookie 订单？我查看了 w3schools，但在那里找不到任何关于我的特定问题的信息。我试过 margin-bottom 和 margin-right 属性，但我想我需要做些别的事情。有人可以给我一个网站或提示我应该如何处理这个问题吗？一个网站会有所帮助和一般解释。我还在下面的图片中附上了我的问题: Here is picture of my problem for anyone's viewing
最佳答案
如果您在此处发布您的 CSS 和 HTML 会容易得多，地址是 https://jsfiddle.net .
好吧，也许你可以做的是用 position: absolute 将它们包裹在一个 div 中。然后您可以相对定位图像，这样它就不会影响表单样式。您可以通过设置 z-index 来调整谁在后台和在前面。
只是一些建议的解决方案，也许你真的应该清楚地定义你的意图，你所说的“在下面”是什么意思？确实，粘贴您的代码会非常有帮助。
关于html - 如何让底部的两个图像位于 css 中顶部的两个图像下方？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42016320/