如何获得一个DIV框来填充网页,而不是向左移?

时间:2019-07-14 10:37:22

标签: html css

我有一个我要修复的客户网站...预订页面的左侧应有地址,右边的联系方式应为该页面。

此刻,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>	

3 个答案:

答案 0 :(得分:2)

您必须做两件事,首先将from datetime import datetime from airflow.models import DAG from airflow.operators.python_operator import PythonOperator from airflow.operators.subdag_operator import SubDagOperator DAG_NAME = 'example_subdag_operator' default_args = { 'owner': 'airflow', 'start_date': datetime(2019, 7, 14, 1, 0, 0) } def get_list(**context): context['task_instance'].xcom_push(key='vv', value='vvvvvvvvccccc') return 'Send Context' def run_strategy(**context): vv = context['task_instance'].xcom_pull( task_ids='get_list', key='vv') print('ffffffffffff', vv) def check(parent_dag_name, child_dag_name, default_args): subdag_id = '%s.%s' % (parent_dag_name, child_dag_name) with DAG(subdag_id, default_args=default_args, schedule_interval="@daily") as dag: for filename in range(1): PythonOperator( provide_context=True, python_callable=run_strategy, task_id='%s-task-%s' % (child_dag_name, filename) ) return dag with DAG(DAG_NAME, default_args=default_args, schedule_interval='@once') as dag: get_list = PythonOperator( provide_context=True, python_callable=get_list, task_id='get_list' ) check = SubDagOperator( task_id='check', subdag=check(DAG_NAME, 'check', default_args) ) get_list >> check 类的宽度设置为contact1,尽管该类已经存在,但是语法错误。放置100%否则将被否决

!important

然后将包含.contact1{ width: 100% !important } 个类的div赋予该div一个带浮点的类

col span_3_of_3

你很好走

Sample Output

答案 1 :(得分:0)

对于“ .section”类,将宽度设置为100%,而不是自动。

在div class =“ company_address”之上,有一个div类别为“ col span_1_of_3”, 对于“ .span_1_of_3”,将宽度增加到50%。 对于“ .col span_3_of_3”,将宽度增加到30%,然后将float设置为:right。 您可以根据需要和响应性设计调整宽度。

答案 2 :(得分:0)

首先修复HTML以标记所有需要的元素-容器(或包装)以及其中的联系框+地址框。然后,您可以将联系人框和地址框浮动到左侧或右侧。另外,您的CSS的目标是HTML中不存在的2个类。