我正在努力创建两个将在顶部容器中并排的盒子。我要做的就是在左侧有一个联系表，然后在右侧有详细信息。因此，当窗口被最小化时，它们俩都彼此下降。
我删除了一些代码来简化问题，请告诉我，如果您需要更多或全部HTML。
html
<section>
<div class="container">
<div class="dark">
<div class="callus"><a href="tel:+07756848657"><i class="fa fa-phone fa-2x" ></i></a></div>
<h2>Get A Quote</h2>
<p>DB Plumbing provides a full range of general plumbing and repair services, from installing your new bathroom suite to fixing that leaking tap or joint that has been annoying you for ages.</p>
</div>
</div>
<div class="container">
<div class="dark">
<div>
</div>
<form class="quote">
<div>
<label>Name</label><br>
<input type="text" style="width: 150px;">
</div>
<div>
<label>Email</label><br>
<input type="email" style="width: 150px;">
</div>
<div>
<label>Phone</label><br>
<input type="text" style="width: 150px;">
</div>
<div>
<label>Message</label><br>
<textarea style="width:250px; height:100px;"></textarea>
</div>
<button class="button_1" type="submit" style="width:
50px;">Send</button>
</form>
</div>
</div>
</article>
</section>
<footer>
<div>
<p>Darren Brady Plumbing Copyright © 2017</p>
</div>
</footer>
CSS
body{
font: 100%/1.5 Arial, Helvetica,sans-serif;
padding:0;
margin:0;
background-color:white;
}
/* Style the list 'container' */
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
/* Float the list items left - this is the 'magic' that turns a vertical list into a horizontal row */
ul.topnav li {
float: left;
}
/* style the links */
ul.topnav li a {
display: inline-block;
color: white;
text-align: center;
text-decoration: none;
transition: 0.3s;
font-size: 100%;
}
/* hover */
ul.topnav li a:hover {
color: gold;
}
/* Hide the icon initially */
ul.topnav li.icon {display: none;}
/* Global */
.container{
width:70%;
margin:auto;
overflow:hidden;
/* Allows the burger nav and branding to sit on the same line */
}
a{
text-decoration: none;
text-shadow: 50px;
color: black;
}
ul{
margin:0;
padding:0;
}
.subscribe{
height:38px;
background:gold;
border:0;
padding-left: 20px;
padding-right:20px;
color:black;
}
.dark{
padding:25px;
background:#35424a;
color:white;
margin-top:10px;
margin-bottom:10px;
}
.maps {
position: relative;
padding-bottom: 75%; // This is the aspect ratio
height: 0;
overflow: hidden;
}
.maps iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}
/* Header **/
header{
background:#35424a;
color:white;
padding-top:30px;
min-height:70px;
border-bottom:gold 5px solid;
}
header a{
color:#ffffff;
text-decoration:none;
text-transform: uppercase;
font-size:100%;
}
header li{
float:left;
display:inline;
padding: 0 20px 0 20px;
}
header #branding{
float:left;
}
header #branding h1{
margin:0;
}
header nav{
float:right;
margin-top:10px;
}
header .highlight{
color:gold;
}
header a:hover{
color:gold;
}
h3 .bronze{
color:#cc6633;
}
h3 .silver{
color:silver;
}
h3 .gold{
color:gold;
}
img {
width:90%;
height:auto;
}
/* Showcase */
#showcase{
min-height:400px;
color:black;
}
#showcase h1{
margin-top:50px;
font-size:300%;
margin-bottom:10px;
}
#showcase p{
font-size:120%;
}
/* Newsletter */
#newsletter{
padding:15px;
color:#ffffff;
background:#35424a
}
#newsletter h1{
float:left;
}
#newsletter form {
float:right;
margin-top:15px;
}
#newsletter input[type="email"]{
padding:4px;
height:26px;
width:250px;
}
/* Sidebar */
aside#sidebar{
float:right;
width:25%;
margin-top:10px;
}
section#contactus .quote input, section#contactus .quote textarea{
width:30%;
padding:5px;
}
/* Main-col */
article#main-col{
float:left;
width:70%;
}
/* Imagery */
#social {
margin-top: 10%;
text-align: center;
font-size: 150%;
color: black;
}
#imagery {
margin-top: 5%;
margin-bottom: 5%;
}
#imagery .box {
float: right;
text-align: center;
width: 30%;
padding:10px;
}
#imagery .box i{
font-size: 700%;
}
/* Create four equal columns that floats next to each other */
.column {
float: left;
width: 20%;
padding: 10px;
}
.column img {
margin-top: 12px;
width: 100%;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
.container .visuals{
float: right;
}
.container .callus{
float: right
}
.fa-phone {
color: gold;
}
/* Services */
ul#services li{
list-style: none;
padding:20px;
border: #cccccc solid 1px;
margin-bottom:5px;
background:#35424a;
color: white;
}
footer{
padding:20px;
margin-top:20px;
color:black;
background-color:gold;
text-align: center;
}
/* Media Queries */
@media(max-width: 768px){
header #branding,
header nav,
header nav li,
#newsletter h1,
#newsletter form,
#boxes .box,
article#main-col,
aside#sidebar{
float:none;
text-align:center;
width:100%;
}
header{
padding-bottom:20px;
}
#showcase h1{
margin-top:40px;
}
#newsletter button, .quote button{
display:block;
width:100%;
}
#newsletter form input[type="email"], .quote input, .quote textarea{
width:100%;
margin-bottom:5px;
}
/* nav */
ul.topnav li {
display: none;
}
ul.topnav li.icon {
display: inline-block;
}
ul.topnav.responsive {position: relative;}
ul.topnav.responsive li.icon {
position: absolute;
right: 0;
top: 0;
}
ul.topnav.responsive li {
float: none; /* 'un' float the list items so they return to displaying vertically */
display: inline;
}
ul.topnav.responsive li a {
display: block;
text-align: left;
}
}
/* 400 pixels */
@media screen and (max-width: 400px){
header #branding, header nav, header nav li {
text-align: center;
width:115%;
font-size: 100%
}
header ul{
padding:10px;
font-size: 100%;
}
#social {
font-size: 150%;
}
#showcase {
min-height: 400px;
font-size: 80%;
}
#imagery .box{
size: 10px 10px;
}
/*css reset
* {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
background-image: url("bg.jpg");
background-size: cover; /*this seems better*/
/*background-size: contain;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* end reset */
我尝试理解您的代码，但是Alttle很难知道您想要什么。我希望这有帮助
<html>
<head>
<!--add these bootstap links to your head section-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<section>
<div class="row"> // this class helps you create a rows using bootstrap's grid layout
<div class="container col-md-5"> // now you can add the col-md-5
//class toy your divs to make them side by side but responsive
<div class="dark">
<div class="callus"><a href="tel:+07756848657"><i class="fa fa-phone fa-2x" ></i></a></div>
<h2>Get A Quote</h2>
<p>DB Plumbing provides a full range of general plumbing and repair services, from installing your new bathroom suite to fixing that leaking tap or joint that has been annoying you for ages.</p>
</div>
</div>
<div class="container col-md-7"> // this makes a larger column for you
<div class="dark">
<div>
</div>
<form class="quote">
<div>
<label>Name</label><br>
<input type="text" style="width: 150px;">
</div>
<div>
<label>Email</label><br>
<input type="email" style="width: 150px;">
</div>
<div>
<label>Phone</label><br>
<input type="text" style="width: 150px;">
</div>
<div>
<label>Message</label><br>
<textarea style="width:250px; height:100px;"></textarea>
</div>
<button class="button_1" type="submit" style="width: 50px;">Send</button>
</div>
</div>
</div>
</section>
<footer>
<div>
<p>Darren Brady Plumbing Copyright © 2017</p>
</div>
</footer>
</body>
</html>