Question

我正在努力创造两个与顶部容器并排的盒子。我想要做的就是在左边有一个联系表格，然后在右边有我的详细信息。因此，当窗口最小化时，它们都会相互叠加。

我已删除了一些代码来简化问题，如果您需要更多或全部的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 &copy; 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 */

Answer 1

我尝试了解你的代码，但很难知道你想要什么。我希望这有帮助

    <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 &copy; 2017</p>
        </div>
    </footer>
</body>
</html>

并排漂浮到相同尺寸的盒子

1 个答案: