Поставить блок <div> друг на против друга

287
10 декабря 2016, 10:42

Как сделать так, чтобы блок 3 встал напротив блока 1, а не напротив блока 2, как сейчас?

.flex-container3 { 
  width: 100%; 
  height: auto; 
  margin: auto; 
  margin-top: 215px; 
  display: flex; 
  flex-direction: row; 
  flex-wrap: wrap; 
  justify-content: center; 
  align-items: flex-start; 
  align-content: flex-start; 
} 
.flex-item1 { 
  order: 1; 
  width: 80%; 
  display: inline-block; 
} 
.comment1 { 
  width: 45%; 
  display: inline-block; 
  text-align: right; 
} 
.comment2 { 
  width: 45%; 
  display: inline-block; 
  height: 250px; 
} 
input { 
  width: 250px; 
} 
.name { 
  display: inline-block; 
  width: 45%; 
  height: 50px; 
  border: 1px solid black; 
  margin-right: 30px; 
  margin-top: 35px; 
} 
.mail { 
  display: inline-block; 
  width: 45%; 
  height: 50px; 
  border: 1px solid black; 
  margin-right: 30px; 
  margin-top: 35px; 
} 
.commit { 
  display: inline-block; 
  width: 45%; 
  height: 50px; 
  border: 1px solid black; 
  margin-right: 30px; 
  margin-top: 35px; 
}
<!DOCTYPE html> 
<html> 
 
<head> 
  <meta charset="utf-8"> 
  <meta name="viewport" content="width=device-width"> 
  <title>JS Bin</title> 
</head> 
 
<body> 
  <div class="flex-container3"> 
    <div class="flex-item1"> 
      <div class="comment1"> 
        <div class="name">1 
          <input type="text" name="name" value=""> 
        </div> 
        <div class="mail">2 
          <input type="text" name="name" value=""> 
        </div> 
      </div> 
      <div class="comment2"> 
        <div class="commit">3 
          <input type="text" name="name" value=""> 
        </div> 
      </div> 
    </div> 
</body> 
 
</html>

Answer 1
.flex-item1 {
display: inline-flex;
}


.flex-container3 { 
  width: 100%; 
  height: auto; 
  margin: auto; 
  margin-top: 215px; 
  display: flex; 
  flex-direction: row; 
  flex-wrap: wrap; 
  justify-content: center; 
  align-items: flex-start; 
  align-content: flex-start; 
} 
 
.flex-item1 { 
  order: 1; 
  width: 80%; 
  display: inline-flex; 
} 
 
.comment1 { 
  width: 45%; 
  display: inline-block; 
  text-align: right; 
} 
 
.comment2 { 
  width: 45%; 
  display: inline-block; 
  height: 250px; 
} 
 
input { 
  width: 250px; 
} 
 
.name { 
  display: inline-block; 
  width: 45%; 
  height: 50px; 
  border: 1px solid black; 
  margin-right: 30px; 
  margin-top: 35px; 
} 
 
.mail { 
  display: inline-block; 
  width: 45%; 
  height: 50px; 
  border: 1px solid black; 
  margin-right: 30px; 
  margin-top: 35px; 
} 
 
.commit { 
  display: inline-block; 
  width: 45%; 
  height: 50px; 
  border: 1px solid black; 
  margin-right: 30px; 
  margin-top: 35px; 
}
<div class="flex-container3"> 
  <div class="flex-item1"> 
    <div class="comment1"> 
      <div class="name">1<input type="text" name="name" value=""></div> 
      <div class="mail">2<input type="text" name="name" value=""></div> 
    </div> 
    <div class="comment2"> 
      <div class="commit">3<input type="text" name="name" value=""></div> 
    </div> 
  </div> 
</div>

Answer 2

Еще можно было как вариант так сделать :) 

.comment1 {
  width: 45%;
  display: inline-block;
  vertical-align: top;
  text-align: right;
}
.comment2 {
  width: 45%;
  display: inline-block;
  vertical-align: top;
  height: 250px;
}
Answer 3
.flex-item1 div {
    display: flex;
    flex-direction: column;
    float: left;
}

Или вот так. https://jsfiddle.net/92zha34t/

Answer 4

Вот здесь есть статья по Flexbox, которая более-менее суммирует необходимые для его использования знания.

READ ALSO
HTML оформление текста из string через JAVA
HTML

HTML оформление текста из string через JAVA

Доброе утро, коллеги! У меня есть текст в string

 415
Не отображается картинка в тэге &lt;img src&gt;
HTML

Не отображается картинка в тэге <img src>

Добрый деньСделал страничку, на которой отображаю картинку из тэга img src"", но она не отображается до того, как не откроешь браузер с нуля

 320
Не работает position relative
HTML

Не работает position relative

Есть такая разметка

 374
Div + float: как растянуть div по высоте?
HTML

Div + float: как растянуть div по высоте?

Пытаюсь сделать таблицу из 2 колонок при помощи CSS:

 344