Div没有正确排队

时间：2018-03-29 08:49:40

标签： html css

我正在为我的朋友制作一个网站。他有一个3dprinter并为人们制作版画。现在我有一个登陆页面和3个div，其中包含信息，价格和表格，供人们提交打印件。我希望这些div显示在彼此旁边，顶部都在彼此旁边Like this

现在他们的位置不同。检查此代码段

/* 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>

我知道这段代码有不同的问题，但这不是这个问题的焦点

有谁知道如何在上图中实现效果？如果是这样。请给出答案。提前谢谢！

5 个答案:

答案 0 :(得分：0)

/* 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>

答案 1 :(得分：0)

你可以这样做：

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}

您可能需要根据需要调整保证金（这是示例代码 - 不是复制和粘贴答案）

答案 2 :(得分：0)

当您使用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
}

答案 3 :(得分：0)

只需对您的CSS进行微小更改即可将vertical-align: middle;添加到 .inlines 

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

答案 4 :(得分：0)

使用以下代码更改.inlines CSS代码：

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

您应该使用float:left代替display:inline-block。希望这会有所帮助。

相关问题
最新问题