表单和彩色网格彼此内联

Question

我有一个联系表单，其宽度为上级div的45％。我想在其旁边添加空白div而不是空格，并在该div中添加一些相关信息。但是，使用当前的代码，我无法内联获取表单和div。

我已经阅读了this one的一些SO帖子，但他们无能为力（也许这就是我当前使用CSS代码的方式）

 #contact {
		width: 90%;
		height: 700px;
		margin-left: 5%;
		background-color: #fff;
		border-radius: 10px;
		color: #000 !important;
		margin: 0 auto;
		clear: none;
	}

	#contact #header {
		padding: 10px 0px;
		width: 100%;
		font-size: 36px;
		float: left;
	}

	#contact-text {
		font-size: 16px;
		width: 45%;
	}

	textarea, input, #contact-text {
		font-family: Quicksand;
		font-size: 16px;
	}

	label {
		display: block;
		padding: 1rem 0 .5rem;
		text-transform: uppercase;
		font-size: 22px;
	}

	input, textarea {
		display: block;
		width: 45%;
		border: 1px solid black;
		padding: .5rem;
	}

	textarea { 
		height: auto; 
		resize: none;
	}

	button {
		font-family: Quicksand;
		font-size: 18px;
		border: 1px solid black;
		padding:.5rem;
		width: auto;
		text-transform: uppercase;
	}

	button:hover {
		cursor: pointer;
	}

	#contact #grid {
		height: 100%
		width:  50%;
		background-color: #bbc6cb;
		float: right;
		overflow: hidden;
		display: inline;
	}

    <div id = "contact">
		<div id = "header">
			<h3>Contact.</h3>
		</div>
		<div id = "contact-text">
			<p>Please fill out the quick form below and we will get in touch as soon as we can</p>
		</div>
		<form action="/" id="contact-form" method="post" role="form">
			<div class = "label">
				<label for="name" class="formText">Name:</label>
			</div>
				<input id="name" name="name" type="text" placeholder="Your name" required="required">
			<div class = "label">
				<label for="email" class="formText">Email:</label>
			</div>
				<input id="email" name="email" type="text" placeholder="Your email" required="required">
			<div class = "label">
				<label for="message" class="formText">Message:</label>
			</div>
				<textarea id="message" name="message" placeholder="Enter your message here" rows="10" required="required"></textarea>
			<div>
		 		<button type="submit">Send</button>	
		 	</div>	  
		</form>
		<div id = "grid">	
		</div>
	</div>

   

Answer 1

将float:left用于form，将下一个div用于内联

  #contact {
		width: 90%;
		height: 700px;
		margin-left: 5%;
		background-color: #fff;
		border-radius: 10px;
		color: #000 !important;
		margin: 0 auto;
		clear: none;
	}

	#contact #header {
		padding: 10px 0px;
		width: 100%;
		font-size: 36px;
		float: left;
	}

	#contact-text {
		font-size: 16px;
		width: 45%;
	}

	textarea, input, #contact-text {
		font-family: Quicksand;
		font-size: 16px;
	}

	label {
		display: block;
		padding: 1rem 0 .5rem;
		text-transform: uppercase;
		font-size: 22px;
	}

	input, textarea {
		display: block;
		width: 90%;
		border: 1px solid black;
		padding: .5rem;
	}

	textarea { 
		height: auto; 
		resize: none;
	}

	button {
		font-family: Quicksand;
		font-size: 18px;
		border: 1px solid black;
		padding:.5rem;
		width: auto;
		text-transform: uppercase;
	}

	button:hover {
		cursor: pointer;
	}
  
  form{
    float:left;
    width:50%;
  }

	#contact #grid {
		height: 100%;
		width:  50%;
		background-color: #bbc6cb;
		float: right;
		overflow: hidden;
		float:left;
	}

<div id = "contact">
		<div id = "header">
			<h3>Contact.</h3>
		</div>
		<div id = "contact-text">
			<p>Please fill out the quick form below and we will get in touch as soon as we can</p>
		</div>
		<form action="/" id="contact-form" method="post" role="form">
			<div class = "label">
				<label for="name" class="formText">Name:</label>
			</div>
				<input id="name" name="name" type="text" placeholder="Your name" required="required">
			<div class = "label">
				<label for="email" class="formText">Email:</label>
			</div>
				<input id="email" name="email" type="text" placeholder="Your email" required="required">
			<div class = "label">
				<label for="message" class="formText">Message:</label>
			</div>
				<textarea id="message" name="message" placeholder="Enter your message here" rows="10" required="required"></textarea>
			<div>
		 		<button type="submit">Send</button>	
		 	</div>	  
		</form>
		<div id = "grid">	
		</div>
	</div>

Answer 2

使用以下代码：

#contact {
    height: 700px;
    background-color: #fff;
    border-radius: 10px;
    color: #000 !important;
    margin: 0 auto;
    clear: none;
    max-width: 1140px;
}
.left-gird, .right-grid {
  width: 49%;
  float: left;
}
.left-gird {
  margin-right: 1%;
}
.right-gird {
  margin-left: 1%;
}
.color-box {
  height: 400px;
  background-color: gray;
}

#contact #header {
    padding: 10px 0px;
    width: 100%;
    font-size: 36px;
    float: left;
}

#contact-text {
    font-size: 16px;
    width: 45%;
}

textarea, input, #contact-text {
    font-family: Quicksand;
    font-size: 16px;
}

label {
    display: block;
    padding: 1rem 0 .5rem;
    text-transform: uppercase;
    font-size: 22px;
}

input, textarea {
    display: block;
    width: 100%;
    border: 1px solid black;
    padding: .5rem;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

textarea { 
    height: auto; 
    resize: none;
}

button {
    font-family: Quicksand;
    font-size: 18px;
    border: 1px solid black;
    padding:.5rem;
    width: auto;
    text-transform: uppercase;
}

button:hover {
    cursor: pointer;
}

#contact #grid {
    height: 100%;
    width:  50%;
    background-color: #bbc6cb;
    float: right;
    overflow: hidden;
    display: inline;
}
h3 {
  margin-top: 0;
}

  <div id = "contact">
    <div class="left-gird">
        <div id = "header">
            <h3>Contact.</h3>
        </div>
        <div id = "contact-text">
            <p>Please fill out the quick form below and we will get in touch as soon as we can</p>
        </div>
        <form action="/" id="contact-form" method="post" role="form">
            <div class = "label">
                <label for="name" class="formText">Name:</label>
            </div>
                <input id="name" name="name" type="text" placeholder="Your name" required="required">
            <div class = "label">
                <label for="email" class="formText">Email:</label>
            </div>
                <input id="email" name="email" type="text" placeholder="Your email" required="required">
            <div class = "label">
                <label for="message" class="formText">Message:</label>
            </div>
                <textarea id="message" name="message" placeholder="Enter your message here" rows="10" required="required"></textarea>
            <div>
                <button type="submit">Send</button> 
            </div>    
        </form>
    </div>

    <div class="right-grid">   
      <div class="color-box"> color box here</div>
    </div>
</div>