Дивы не выстраиваются должным образом

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

Сейчас они позиционируются иначе. Проверьте этот фрагмент

/* Color Scheme: https://coolors.co/333333-e4fde1-c9cebd-648381-f0eff4 */

* {
	margin: 0;
	padding: 0;
}

html, body{
	background: #E4FDE1;
	width: 100%;
	height: 100%;
}

#background {
  position: relative;
  left: 0;
  top: 0;
	filter: blur(40px);
	width: 100%;
	height: 100%;
	background-image: url('https://jorik.tk/3dprint/img/3d-printing-2.jpg');
  background-position: center;
  border-bottom: solid 5px #333333;
}

#blur {
	color: rgb(0, 0, 0);
	color: rgba(0, 0, 0, 0.1);
	width: 100%;
	height: 100%;
}

#content {
	width: 100%;
	margin: 0 auto;
	display: table;
  position: absolute;
  left: 0;
  top: 30%;
}

#content h1 {
	width: 100%;
	text-align: center;
  visibility: visible;
  font-family: Roboto Slab;
  font-size: 500%;
  color: #333333;
  filter: none;
}

#title-wrap {
	width: 40%;
	display: table-cell;
	text-align: center;
	background-color: #c9cebd;
	opacity: 0.6;
}

#lm-button {
	display: table;
	position: absolute;
	top: 60%;
	text-align: center;
	width: 100%;
	height: 6%;
	background: #648381;
	opacity: 0.6;
	transition: opacity 0.6s;
}

#lm-button:hover {
	opacity: 1;
}

#lm-button p {
	font-family: Ubuntu, sans-serif;
	font-size: 130%;
	line-height: 250%;
	opacity: 1;
	
}

#info {
	margin: auto;
	border-top: solid 10px #333333;
	z-index: 5;
}

#contact {
	margin: auto;
}

@media (max-width: 685px) {
	#content h1 {
		font-size: 300%;
	}
}

#text {
	text-align: center;	
}

#uitleg {
	text-align: center;
	font-family: 'Varela Round', sans-serif;
}

.inline {
	display: block;
}

#prijzen {
	text-align: center;
}

h3 {
	text-align: center;
	font-family: Ubuntu, sans-serif;
}

.inlines {
	display: inline-block;
	margin: auto;
	width: 300px;
	background: #648381;
	height: 400px;
	padding: 30px;
}

#inlinescontainer {
	margin: 20px auto;
	max-width: 1200px;
}

<html lang = "en">
   <head>
      <link href = "https://fonts.googleapis.com/css?family=Merriweather|Roboto+Slab|Ubuntu" rel = "stylesheet">
      <link href = "https://fonts.googleapis.com/css?family=Ubuntu" rel = "stylesheet">
      <link href = "style.css" type = "text/css" rel = "stylesheet">
      <link rel = "shortcut icon" href = ""/>
      <meta charset = "UTF-8">
      <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
      <meta http-equiv = "X-UA-Compatible" content = "ie=edge">
      <title>3D Printen</title>
   </head>
   <body>
      <div id = "background"></div>
      <div id = "content">
         <div id = "title-wrap">
            <h1>3D Printen in stijl.</h1>
         </div>
      </div>
      <div onclick = "scrollToInfo()" id = "lm-button">
         <p id = "lm-button-text">Meer info</p>
      </div>
      <div id = "info">
      </div>
      <div id = "inlinescontainer">
         <div class = "inlines">
            <p id = "uitleg">Zoek op <a href = "https://yeggi.com" target = "_blank">yeggi.com</a> iets wat je wilt dat ik voor je print,
               stuur de link hieronder samen met je email en welke kleur je wilt naar mij toe.
               Je ontvangt dan een mail met de afmetingen van de print. Je kan de print nog annuleren door me terug te mailen. 
               Als het klaar is krijg je je print de volgende dag. (Je moet hiervoor wel op het Greijdanus zitten) Hieronder zie je de tarieven.
               De beschikbare kleuren zijn: Blauw, zwart en goud.<br><br><i>(Max 10 meter per print toegestaan)</i>
            </p>
         </div>
         <div class = "inlines">
            <h3>Tarieven</h3>
            <p id = "prijzen">
               1 meter: €0,10<br>
               2 meter: €0,30<br>
               3 meter: €0,40<br>
               4 meter: €0,50<br>
               5 meter: €0,70<br>
               6 meter: €0,80<br>
               7 meter: €0,90<br>
               8 meter: €1,10<br>
               9 meter: €1,20<br>
               10 meter: €1,30<br>
            </p>
         </div>
         <div class = "inlines">
            <div id = "contact">
               <form id = "contact-form" name = "form" method = "POST" action = "">
                  <input type = "text" placeholder = "email" name = "email" id = "email" class = "inline">
                  <textarea placeholder = "bericht" name = "message" id = "bericht" cols = "40" rows = "5" class = "inline"></textarea>
                  <?php echo '<input type = "hidden" value = "'. $idnull . '" name = "id">' ?>
                  <input type = "submit" name = "submit" id = "submit" value = "Stuur!" class = "inline">
               </form>
               <p id = "text"><?php if (!filter_var($email, FILTER_VALIDATE_EMAIL) and $email != "") {echo "Voer A.U.B. een geldig e-mail adres in";} ?></p>
            </div>
         </div>
      </div>
   </body>
</html>

Я знаю, что в этом коде есть другие проблемы, но в этом вопросе речь не идет об этом

Кто-нибудь знает, как я мог добиться эффекта на картинке выше? Если так. Пожалуйста, дайте ответ. Заранее спасибо!

не могли бы вы предоставить то же самое на jsfiddle

— 29.03.2018 10:51

Если вы хотите просмотреть это в полноэкранном режиме. Вы можете перейти на jorik.tk/3dprint. В любом случае, jsfiddle.net/w7rvxo0s поехали.

— 29.03.2018 10:54

html css

29.03.2018 10:49

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 5

/* Color Scheme: https://coolors.co/333333-e4fde1-c9cebd-648381-f0eff4 */
/*Add 'vertical-align: top;' to .inlines class in your css*/

* {
	margin: 0;
	padding: 0;
}

html, body{
	background: #E4FDE1;
	width: 100%;
	height: 100%;
}

#background {
  position: relative;
  left: 0;
  top: 0;
	filter: blur(40px);
	width: 100%;
	height: 100%;
	background-image: url('https://jorik.tk/3dprint/img/3d-printing-2.jpg');
  background-position: center;
  border-bottom: solid 5px #333333;
}

#blur {
	color: rgb(0, 0, 0);
	color: rgba(0, 0, 0, 0.1);
	width: 100%;
	height: 100%;
}

#content {
	width: 100%;
	margin: 0 auto;
	display: table;
  position: absolute;
  left: 0;
  top: 30%;
}

#content h1 {
	width: 100%;
	text-align: center;
  visibility: visible;
  font-family: Roboto Slab;
  font-size: 500%;
  color: #333333;
  filter: none;
}

#title-wrap {
	width: 40%;
	display: table-cell;
	text-align: center;
	background-color: #c9cebd;
	opacity: 0.6;
}

#lm-button {
	display: table;
	position: absolute;
	top: 60%;
	text-align: center;
	width: 100%;
	height: 6%;
	background: #648381;
	opacity: 0.6;
	transition: opacity 0.6s;
}

#lm-button:hover {
	opacity: 1;
}

#lm-button p {
	font-family: Ubuntu, sans-serif;
	font-size: 130%;
	line-height: 250%;
	opacity: 1;
	
}

#info {
	margin: auto;
	border-top: solid 10px #333333;
	z-index: 5;
}

#contact {
	margin: auto;
}

@media (max-width: 685px) {
	#content h1 {
		font-size: 300%;
	}
}

#text {
	text-align: center;	
}

#uitleg {
	text-align: center;
	font-family: 'Varela Round', sans-serif;
}

.inline {
	display: block;
}

#prijzen {
	text-align: center;
}

h3 {
	text-align: center;
	font-family: Ubuntu, sans-serif;
}

.inlines {
	display: inline-block;
	margin: auto;
	width: 300px;
	background: #648381;
	height: 400px;
	padding: 30px;
  vertical-align: top;
}

#inlinescontainer {
	margin: 20px auto;
	max-width: 1200px;
}

<html lang = "en">
   <head>
      <link href = "https://fonts.googleapis.com/css?family=Merriweather|Roboto+Slab|Ubuntu" rel = "stylesheet">
      <link href = "https://fonts.googleapis.com/css?family=Ubuntu" rel = "stylesheet">
      <link href = "style.css" type = "text/css" rel = "stylesheet">
      <link rel = "shortcut icon" href = ""/>
      <meta charset = "UTF-8">
      <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
      <meta http-equiv = "X-UA-Compatible" content = "ie=edge">
      <title>3D Printen</title>
   </head>
   <body>
      <div id = "background"></div>
      <div id = "content">
         <div id = "title-wrap">
            <h1>3D Printen in stijl.</h1>
         </div>
      </div>
      <div onclick = "scrollToInfo()" id = "lm-button">
         <p id = "lm-button-text">Meer info</p>
      </div>
      <div id = "info">
      </div>
      <div id = "inlinescontainer">
         <div class = "inlines">
            <p id = "uitleg">Zoek op <a href = "https://yeggi.com" target = "_blank">yeggi.com</a> iets wat je wilt dat ik voor je print,
               stuur de link hieronder samen met je email en welke kleur je wilt naar mij toe.
               Je ontvangt dan een mail met de afmetingen van de print. Je kan de print nog annuleren door me terug te mailen. 
               Als het klaar is krijg je je print de volgende dag. (Je moet hiervoor wel op het Greijdanus zitten) Hieronder zie je de tarieven.
               De beschikbare kleuren zijn: Blauw, zwart en goud.<br><br><i>(Max 10 meter per print toegestaan)</i>
            </p>
         </div>
         <div class = "inlines">
            <h3>Tarieven</h3>
            <p id = "prijzen">
               1 meter: €0,10<br>
               2 meter: €0,30<br>
               3 meter: €0,40<br>
               4 meter: €0,50<br>
               5 meter: €0,70<br>
               6 meter: €0,80<br>
               7 meter: €0,90<br>
               8 meter: €1,10<br>
               9 meter: €1,20<br>
               10 meter: €1,30<br>
            </p>
         </div>
         <div class = "inlines">
            <div id = "contact">
               <form id = "contact-form" name = "form" method = "POST" action = "">
                  <input type = "text" placeholder = "email" name = "email" id = "email" class = "inline">
                  <textarea placeholder = "bericht" name = "message" id = "bericht" cols = "40" rows = "5" class = "inline"></textarea>
                  <?php echo '<input type = "hidden" value = "'. $idnull . '" name = "id">' ?>
                  <input type = "submit" name = "submit" id = "submit" value = "Stuur!" class = "inline">
               </form>
               <p id = "text"><?php if (!filter_var($email, FILTER_VALIDATE_EMAIL) and $email != "") {echo "Voer A.U.B. een geldig e-mail adres in";} ?></p>
            </div>
         </div>
      </div>
   </body>
</html>

29.03.2018 10:54

Вы можете добиться этого:

html:

<div class = "full-container">
    <div class = "col-third inline-block">content</div>
    <div class = "col-third inline-block">content</div>
    <div class = "col-third inline-block">content</div>
</div>

css:

.full-container {width: 100%}
.col-third      {margin: 0 4px; width: 32%}
.inline-block   {display: inline-block}

вам может потребоваться отрегулировать маржу в зависимости от того, что вы хотите (это пример кода, а не ответ копирования и вставки)

29.03.2018 10:55

Когда вы используете display: inline-block;, vertical-align: top; рекомендуется или почти обязательно, попробуйте:

.inlines {
display: inline-block;
margin: auto;
width: 300px;
background: #648381;
height: 400px;
padding: 30px;
vertical-align: top; // Key line
}

29.03.2018 10:56

Ответ принят как подходящий

Просто небольшое изменение в вашем css, добавьте vertical-align: middle; в .inlines

.inlines {
    display: inline-block;
    margin: auto;
    width: 300px;
    background: #648381;
    height: 400px;
    padding: 30px;
    vertical-align: middle; /*Added*/
}

29.03.2018 10:57

Измените код CSS .inlines на этот:

float: left;
width: 300px;
background: #648381;
height: 400px;
padding: 30px;
margin: 20px 20px 50px;

Вы должны использовать float:left вместо display:inline-block. Надеюсь это поможет.

нет, не следует - float вряд ли когда-либо следует использовать

— 29.03.2018 11:19

29.03.2018 11:15

Другие вопросы по теме

Как исправить разрыв границы с помощью border-radius?

Создавать имена классов с дробными числами

Bootstrap card-columns: Safari странным образом отображает тень окна карт

Как мы можем создать контрольную доску с помощью PHP-программирования

Как уменьшить ширину между сетками Bootstrap

Удалить родительский класс, если поле ввода заполнено

Uncaught TypeError: невозможно прочитать свойство 'top' из undefined (offset (). Top)

Верхние 2 изображения figcatpion hide при исправлении положения заголовка

Вход, заполняющий всю доступную высоту

Разделить пополам по вертикали и горизонтали второй гибкий элемент

Дивы не выстраиваются должным образом

Ответы 5

Другие вопросы по теме

Похожие вопросы