我不知道我的代码有什么问题,但它不会显示我想要的位置。
这是输出:
这是我的代码:
<!DOCTYPE html>
<html>
<head>
<title>Escapade Travel & Tours</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.css" rel="stylesheet">
<!--Google Fonts-->
<link href='http://fonts.googleapis.com/css?family=Duru+Sans|Actor' rel='stylesheet' type='text/css'>
<link href="css/bootshape.css" rel="stylesheet">
</head>
<body>
<!-- Navigation bar -->
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="Home.html"><span class="green">Escapade</span> Travel & Tours</a>
</div>
<nav role="navigation" class="collapse navbar-collapse navbar-right">
<ul class="navbar-nav nav">
<li class="active"><a href="Home.html">Home</a>
</li>
<li class="dropdown">
<a data-toggle="dropdown" href="#" class="dropdown-toggle">Destination <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Boracay</a>
</li>
<li class="active"><a href="#">Palawan</a>
</li>
<li><a href="#">Cebu</a>
</li>
<li class="divider"></li>
<li><a href="#">All Destinations</a>
</li>
</ul>
</li>
<li><a href="SpecialOffers.html">Special Offers</a>
</li>
<li><a href="BookNow.html">Book Now!</a>
</li>
<li><a href="ContactUs.html">Contact Us</a>
</li>
</ul>
</nav>
</div>
</div>
<!-- End Navigation bar -->
<!-- Content -->
<div class="container">
<div style="clear: both; height:40px;"></div>
<div style="clear: both; height:15px;"></div>
<div style="clear: both; height:15px;"></div>
<div id="cont_razd">
<div id="right">
<h1>Meet Us</h1>
<div style="height:15px;"></div>
<div class="box_us">
<div class="box_us_r">
<img src="img/fish_us1.gif"> Quezon City, Philippines</div>
<div style="clear: both; height:15px;"></div>
<p>
<img src="img/fish_us2.gif"> Telephone: 02-1234567</p>
<div style="clear: both; height:15px;">
<p> Cellphone: 0912-345-6789</p>
<div style="clear: both; height:15px;"></div>
</div>
</div>
<div class="box_us">
<div class="box_us_l"></div>
<div class="box_us_r">
<div class="box_us_r">
<div style="clear: both; height:15px;"></div>
<img src="img/fish_us3.gif" alt="" /> Email Add: escapadetravelandtours@yahoo.com</div>
</div>
</div>
<div class="box_us">
</div>
<div style="height:25px;"></div>
<b> <i> Book us now and get very good rates! :) </b>
</i>
<br/>
</div>
<div id="left">
<h1>Contact Us</h1>
<div style="clear: both; height:15px;"></div>
<?php echo "<form action=" " method="post ">
<b> Name: </b> <br>
<input type=text size=40 name="ContactName ">
<br> <br> <b> E-mail Address: </b> <br>
<input type=text size=40 name="ContactEmail ">
<br> <br> <b> Subject: </b> <br>
<input type=text size=40 name="ContactSubject ">
<br> <br> <b> Message: </b> <br>
<textarea cols=40 rows=5 input type=text size=150 name="ContactMessage "> </textarea>
<br> <br>
<input type="Submit " name="Send " value="Send ">
<input type="Reset " name="Reset " value="Reset ">" ?>
<div style="clear: both"></div>
</div>
</div>
</div>
<!-- End Content -->
<!-- Footer -->
<div class="footer text-center">
<p>© 2016. All Rights Reserved. Created by</p>
</div>
<!-- End Footer -->
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootshape.js"></script>
</body>
</html>
&#13;
我希望与我们见面是在右边,而联系我们在左边,但它不会放在我指示的地方。
我已将<div id="right">
与我们联系,<div id="left">
与我们联系。
我在这里使用记事本++。
请帮忙。谢谢!
答案 0 :(得分:1)
您可以尝试以下代码:
<div class="clearfix">
<div class="col-lg-6 col-md-6 col-sm-6">
left
</div>
<div class="col-lg-6 col-md-6 col-sm-6">
right
</div>
</div>
答案 1 :(得分:1)
答案 2 :(得分:0)
使用bootstrap girds参见bootstrap girds的示例,另见here
答案 3 :(得分:0)
你可以使用
<div class="row">
<div class="col-lg-9">
Your Left content
</div>
<div class="col-lg-3">
Your right content
</div>
</div>
最简单的方法,当你使用Bootstrap ..
答案 4 :(得分:0)
你已经在代码中包含了bootstrap ..所以你可以使用bootstrap类。
<div class="row>
<div class="col-lg-6 col-xs-12">
<!-- Put your contact Us div here -->
</div>
<div class="col-lg-6 col-xs-12">
<!-- Put your meet Us div here -->
</div>
</div>
答案 5 :(得分:0)
div id = "right"
不会将你的div放在右边,只是给它一个id。 将两个div包含在
中div class = "row"
然后使用列跨度进行子div。
在这里了解bootstrap网格系统: -
http://www.w3schools.com/bootstrap/bootstrap_grid_system.asp
答案 6 :(得分:0)
将“与我们联系”div
放在“与我们见面”div
之前。然后将float:left;
应用于该元素。尽可能避免float:right;
。
否则,您可以对display:inline-block
使用div
。就像浮动一样工作,你甚至可以垂直对齐它们。