如何对齐图像旁边的字段集？

Question

web 应如下所示

header: image
image - fieldset - fieldset
image - fieldset
image - fieldset

但是，我尝试使用.css 作为外部表，但没有任何改变。 这是我的代码：

 <center> <img src="header.gif" alt="header"> </center> <br> <img src="one.gif" alt="one" class="one-image"> <form action="https://www.freecatphotoapp.com/submit-cat-photo"> <div class="field"> <fieldset style="width: 300px; height: 180;"> <legend>Contact Details</legend> <label for="fname">Name:</label> <br> <input type="text" id="fname" name="fname"></br> <label for="lname">Cell no.:</label> <br> <input type="text" id="lname" name="lname"> </br> <label for="email">Address:</label> <br> <input type="email" id="email" name="email"><br> </fieldset> </div> <br> <br> <input type="submit" value="Submit"> </form> <br></br> <img src="two.gif" alt="two"> <br></br> <img src="three.gif" alt="three"> </div>

Answer 1

你可以做这样的事情。
我使用float属性将每个部分的 position 设置为向左或向右。 不要忘记将overflow: hidden属性添加到父组件。

代码笔示例