如何在图像旁边对齐fieldset？

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属性将每个部分的位置设置为左侧或右侧。不要忘记将overflow: hidden属性添加到父组件中。

Codepen Example