Question

/* 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>&nbsp;</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

Answer 1

如果您在此处https://jsfiddle.net发布CSS和HTML会更容易。

好吧，你可以做的就是用 position：absolute 将它们包装在一个div中。然后，您可以将图像定位为相对，这样它就不会影响表单样式。您可以通过设置 z-index 来调整后台和前方的人员。

只是一些建议的解决方案，可能你真的应该清楚地定义你的意图，你的意思是什么？＆＃34;＆＃34;？实际上，粘贴代码将非常有用。

Answer 2

图像所在的容器＆gt;位置：绝对

图像＆gt;位置：相对，Z指数:(高到足以将图像推到前面）

Answer 3

试试这个，我不得不即兴发挥，因为你的代码只有2张图片而不是4张。

HTML

$ cat dat/instr.txt
label:  add     $t0,$t1,$t2
next:   sub     $r0,$r1,$r2
foo:    bar
last:   mul     $s0,$s1,$s2

和css

$ ./bin/sscanffmt <dat/instr.txt
label: label
inst : add
rd   : t0
rs   : t1
rt   : t2

label: next
inst : sub
rd   : r0
rs   : r1
rt   : r2

error: invalid conversion.

label: last
inst : mul
rd   : s0
rs   : s1
rt   : s2

我删除了div css中的填充，并添加了一个clearfix来清除hmtl中有2个图像的浮动。适合我：）

如何让底部的两个图像位于css中的前两个图像下方？

3 个答案: