Блог

Главная - Вопросы по программированию - Проблема с размещением изображения рядом с формой отправки , рядом друг с другом

Проблема с размещением изображения рядом с формой отправки , рядом друг с другом

#html #css #position #element

Вопрос:

Я пытался поместить изображение в положение класса-изображение рядом с формой в положении класса-форма. Я перепробовал так много разных способов отображения , метод float , у меня ничего не получилось, элементы всегда сжимаются в углу и меняют форму, даже если я меняю ширину

  <div class ="submit-form">
<div class ="position-form">
  <form class ="form"action="https://formsubmit.co/jani.godojo@gmail.com" method="POST">
    <input type="text" id="fname"placeholder="Enter your first 
    name"required>
    <input type="text" id="lname"placeholder="Enter your last name" 
     required>
    <input type="text" id="email"placeholder="Enter your email" 
    required>
    <textarea name ="text-inquiry" rows ="10" wrap ="hard" 
  placeholder="Write your inquiry here..."></textarea>
    <input type="submit" value="Submit">
  </form>
</div> 
  <div class ="position-image"><img src="images/add.jpg" style 
 ="width:20%;"></div>
 </div>

   .submit-form {
    border-radius:2%;
    background-color: #f2f2f2;
    padding: 5%;
    display: flex;
    }
    input[type=text-inquiry], select {
    width: 30%;
    height:50%;
    padding: 12px 20px;
    margin: 8px 0;
    display: block;
    border: 1px solid rgb(192, 192, 192);
    border-radius: 4px;
    box-sizing: border-box;
    }
    .form > textarea{
    width:30%;
    }
   .position-form{
   flex-wrap: wrap;
   align-content: flex-start;
   width:50%;}

  .position-image img{
  flex-wrap: wrap;
  align-content: flex-start;
  width:50%;
  }

Комментарии:

1. Вот мой CSS-код

2. .форма отправки { радиус границы:2%; цвет фона: #f2f2f2; заполнение: 5%; дисплей: гибкий; }

3. Это все твой css? Пожалуйста, добавьте это непосредственно к вашему вопросу

4. Не все это только то, что у меня есть для раздела «Отправить форму», где слева находится «Отправить», а справа-изображение

5. Чего вы пытаетесь достичь, где должны быть размещены элементы? Форма со всеми входными данными друг под другом и изображением рядом с формой с правой стороны?

Ответ №1:

Я предлагаю вам ознакомиться с комментариями в примере, поиграть с ним и просто попытаться привыкнуть к flexbox. Есть много полезных сайтов, которые подробно объясняют это так

 .submit-form {
  display: flex;  /*sets form and image next to each other*/  
  border-radius: 2%;
  background-color: #f2f2f2;
  padding: 5%;
}

form {
  display: flex;
  flex-direction: column; /*> elements in form beneath each other */
} 
 <div class="submit-form">
  <form class="form" action="https://formsubmit.co/jani.godojo@gmail.com" method="POST">
    <input type="text" id="fname" placeholder="Enter your first 
    name" required>
    <input type="text" id="lname" placeholder="Enter your last name" required>
    <input type="text" id="email" placeholder="Enter your email" required>
    <textarea name="text-inquiry" rows="10" wrap="hard" placeholder="Write your inquiry here..."></textarea>
    <input type="submit" value="Submit">
  </form>

  <img src="images/add.jpg" style="width:20%;">
</div>

Комментарии:

1. Да, я действительно разработал это прошлой ночью с помощью flex box, это отличный инструмент

Ответ №2:

 .flex-class{
 display:flex;
 align-content: center;
 justify-content: space-around;
 padding-bottom: 40px;
 }
 #column-residential{
  border-radius: 5px;
  padding:15px;
  width: 400px;
  background-color:#eeeeee;
   }
  #column-commercial{
   border-radius: 5px;
   padding:15px;
   width: 400px;
   background-color: #eeeeee;
Метки: ,