代码之家 › 专栏 › 技术社区 › lablanco

尝试在HTML-CSS表单旁边获取一些信息

css html

lablanco · 技术社区 · 6 年前

所以我用HTML制作了一个包含表单和一些信息的页面。我创建了两个类,一个用于CSS中名为.contactform的表单,另一个用于CSS中名为.contactinformatie的信息。

我想把信息放在表格旁边,但它不起作用。这就是我的页面的外观(如您所见,信息位于窗体的右侧,而不是窗体的右侧:

https://gyazo.com/d2b6619b6abece882559243fb42e7fd6

我怎样才能解决这个问题?

以下是我的HTML代码:

<div class="contactform">
<h3> Uw gegevens: </h3>
<form action="">
     Naam*<br>
    <input type="text" name="Naam" value="Tom">
    <br><br>
     Email adres*<br>
    <input type="text" name="email" value="tom@gmail.com">
    <br><br>
     Telefoonnummer<br>
    <input type="text" name="telefoonnummer" value="020-694-2033">
    <br><br>
     Uw vraag<br>
    <textarea id="txtarea" rows="10" cols="70" value="Hoe kan ik een vluchtnummer toevoegen?"></textarea>

    <br><br>
    <input type="submit" value="Versturen">
</form>
</div>

<div class="contactinformatie">
    <p>U kunt 24 uur per dag telefonisch contact met ons opnemen </p>  <p>020-5 160 160</p>
    <br>


    <p>Email: </p> <p>test@hva.nl</p>
    <br><br><p>Adres: </p> <p>Wibautstraat 44</p>

</div>

.contactinformatie {
     float:right;
     margin: auto;
     width: 48%;
     height: 50%;
 }

.contactform {
    margin-top: 80px;
    margin-left: 50px;
}

那么如何在CSS中获得表单旁边的信息呢?

5 回复 | 直到 6 年前

Vikas Jadhav 6 年前

您可以使用flexbox实现这一点,请参阅下面我包装您的和 联系人信息 div进入了容器并设置 .container { :flex

.container {
  display: flex;
}

.contactinformatie,
.contactform {
  width: 100%;
  height: 100%;
}

<div class="container">
  <div class="contactform">
    <h3> Uw gegevens: </h3>
    <form action="">
      Naam*<br>
      <input type="text" name="Naam" value="Tom">
      <br><br> Email adres*<br>
      <input type="text" name="email" value="tom@gmail.com">
      <br><br> Telefoonnummer
      <br>
      <input type="text" name="telefoonnummer" value="020-694-2033">
      <br><br> Uw vraag<br>
      <textarea id="txtarea" rows="10" cols="70" value="Hoe kan ik een vluchtnummer toevoegen?"></textarea>

      <br><br>
      <input type="submit" value="Versturen">
    </form>
  </div>

  <div class="contactinformatie">
    <p>U kunt 24 uur per dag telefonisch contact met ons opnemen </p>
    <p>020-5 160 160</p>
    <br>


    <p>Email: </p>
    <p>test@hva.nl</p>
    <br><br>
    <p>Adres: </p>
    <p>Wibautstraat 44</p>

  </div>
</div>

Ozturk Can Gokkaya 6 年前

在contactform和;联系信息类。记住在这两个元素之后清除float。

.contactform, 
.contactinformatie {
  width: 50%;
  float: left
}

Vishnu 6 年前

.contactinformatie {
  display: inline-block; 
  margin: auto;
  width: 48%;
  height: 50%;
}

.contactform {
 display: inline-block;
 margin-top: 80px;
 margin-left: 50px;
 max-width: calc(100% - 48% - 50px)
}

msafi 6 年前

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

.contactinformatie {
  padding: 50px;
  float:right;
  width: 50%;
 }

.contactform {
  padding: 50px;
  float: left;
  width: 50%;
}

下面是一个代码笔,它将所有内容显示在一起:

https://codepen.io/anon/pen/yRgZXG

Arshiya Khanam 6 年前

.contactinformatie {
     margin-left: 50px;
     width: 48%;
     height: 50%;
 }

.contactform {
    margin-top: 80px;
    margin-left: 50px;
}

<div class="contactform">
<h3> Uw gegevens: </h3>
<form action="">
     Naam*<br>
    <input type="text" name="Naam" value="Tom">
    <br><br>
     Email adres*<br>
    <input type="text" name="email" value="tom@gmail.com">
    <br><br>
     Telefoonnummer<br>
    <input type="text" name="telefoonnummer" value="020-694-2033">
    <br><br>
     Uw vraag<br>
    <textarea id="txtarea" rows="10" cols="70" value="Hoe kan ik een vluchtnummer toevoegen?"></textarea>

    <br><br>
    <input type="submit" value="Versturen">
</form>
</div>

<div class="contactinformatie">
    <p>U kunt 24 uur per dag telefonisch contact met ons opnemen </p>  <p>020-5 160 160</p>
    <br>
    <p>Email: </p> <p>test@hva.nl</p>
    <br><br><p>Adres: </p> <p>Wibautstraat 44</p>
</div>

检查上述代码。