html - 如何让一个DIV框填满网页而不往左走？

Question

我有一个客户的网站，我正在尝试修复...预订页面应该在左侧有地址，在右侧有联系表格，并且白框应该填写网页。

目前，DIV 框刚好向左对齐，这意味着联系表和地址被压在一起。我能做些什么？ Here is the webpage

.box {
  background-color: white; /* for visualization purposes */
  display: inline-block;
  max-width: 100%;
  
}

.box2 {
  display: inline-block;
  padding: 20px 20px;
  max-width: 100%;
  
}

<div class="content">
		<div class="wrap">
			<div class="contact">
		<h1>Book an Appointment Online or via Telephone/Email:</h1>
		<div class="section group contact1">				
				<div class="col span_1_of_3">
      			<div class="company_address">
				     	<h3>Company Information:</h3>
						    	<p>BY APPOINTMENT ONLY</p>
						    	<p>Imani Skin Clinic,</p>
						   		<p>8-10 Sneyd Street</p>
								<p>Cobridge</p>
								<p>ST6 2NZ</p>
						   		<p>United Kingdom</p>
				   		<p>Phone:+447305585588</p>
				 	 	<p>Email: <span>info@imaniskinclinic.com</span></p>
				   		<br />
						<br />
						<div id="share-buttons">
							
							<!-- Twitter -->
    <a href="https://twitter.com/imaniskinclinic" target="_blank">
        <img src="https://simplesharebuttons.com/images/somacro/twitter.png" alt="Twitter" />
    </a>
	
	<!-- Facebook -->
    <a href="http://www.facebook.com/imaniskinclinic" target="_blank">
        <img src="https://simplesharebuttons.com/images/somacro/facebook.png" alt="Facebook" />
    </a>
	
	<!-- Instagram -->
    <a href="http://www.instagram.com/imaniskinclinic" target="_blank">
        <img src="images/insta.jpg" alt="Instagram" />
    </a>
						
						</div>
					<br />
					<br />
						
				</div>
				
					<div id="contact"><a class="shedul-embed-button-link" style="overflow: visible; cursor: pointer; background: rgb(248,171,190); color: rgb(255, 255, 255); border: 0px; display: inline-block; outline: none; padding: 10px 15px; margin: 0px; font-family: Roboto, sans-serif; font-size: 16px; line-height: 16px; text-decoration: none; border-radius: 3px; -webkit-appearance: none; box-shadow: none;" href="https://www.fresha.com/providers/imani-skin-clinic-ltd-cgfhlxsq">Book Now</a><script>!function(e){var t="shedul-embed-button-loader",d="https:"===e.location.protocol?"https":"http",n=e.getElementsByTagName("head")[0];if(!e.getElementById(t)){var o=e.createElement("script"),p=e.createElement("style");o.id=t,o.src="https://app.shedul.com/embed_button.js".replace(/^\w+/,d),p.type="text/css",p.innerHTML=".shedul-widget-open { position: fixed; overflow:hidden; }",n.appendChild(o),n.appendChild(p)}}(document);</script></div>

				
				
	</div>
	

	
	<div class="col span_3_of_3">
				  <div class="contact-form">				  
                        
					<div id="zbwid-fbedad33"></div>    

                       
				    </div>
  				</div>	

Answer 1

你必须做两件事，首先将 contact1 类设置为 100% 宽度，虽然它已经存在但语法错误。放!important 否则会被否决

.contact1{ width: 100% !important }

然后是包含col span_3_of_3类的div，给这个div一个带 float 的类

.your-class-name{ float: right !important }

一切顺利