HTML、CSS、私のコードで何が間違っているのか分かりません

私のコードで何が間違っているのかわかりませんが、私が望む位置は表示されません。HTML、CSS、私のコードで何が間違っているのか分かりません

ここでは出力です：

そしてここでは、私のコードです：

<!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">&nbsp; Quezon City, Philippines</div> 
 
      <div style="clear: both; height:15px;"></div> 
 
      <p> 
 
      <img src="img/fish_us2.gif">&nbsp; &nbsp;Telephone: 02-1234567</p> 
 
      <div style="clear: both; height:15px;"> 
 
      <p>&nbsp; &nbsp; &nbsp; &nbsp;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="" />&nbsp; Email Add: [email protected]</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 "> 
 
\t \t \t \t \t \t \t \t \t <b> Name: </b> <br> 
 
\t \t \t \t \t \t \t \t \t <input type=text size=40 name="ContactName "> 
 
\t \t \t \t \t \t \t \t \t <br> <br> <b> E-mail Address: </b> <br> 
 
\t \t \t \t \t \t \t \t \t <input type=text size=40 name="ContactEmail "> 
 
\t \t \t \t \t \t \t \t \t <br> <br> <b> Subject: </b> <br> 
 
\t \t \t \t \t \t \t \t \t <input type=text size=40 name="ContactSubject "> 
 
\t \t \t \t \t \t \t \t \t <br> <br> <b> Message: </b> <br> 
 
\t \t \t \t \t \t \t \t \t <textarea cols=40 rows=5 input type=text size=150 name="ContactMessage "> </textarea> 
 
\t \t \t \t \t \t \t \t \t <br> <br> 
 
\t \t \t \t \t \t \t \t \t <input type="Submit " name="Send " value="Send "> 
 
\t \t \t \t \t \t \t \t \t <input type="Reset " name="Reset " value="Reset ">" ?> 
 

 
     <div style="clear: both"></div> 
 
     </div> 
 
    </div> 
 

 
    </div> 
 

 

 
    <!-- End Content --> 
 

 
    <!-- Footer --> 
 
    <div class="footer text-center"> 
 
    <p>&copy; 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>

私は私達に連絡しながら、右にある場所であるために私達に会いたいです左にありますが、私はそれらを示す場所に配置されません。

<div id="right">を私たちに、<div id="left">を私たちに連絡しました。

ここではnotepad ++を使用しています。

This is my expected output

助けてください。ありがとう！

<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>

出典

2016-04-06 Yharie Tuazon

これはCSSに基づいています。#leftや#rightのような少なくとも関連するものをCSSに投稿してください。 – ameenulla0007

構文はあなたの最後のエコーで非常に奇妙なようです... https://3v4l.org/uRefC – Ekin

ああ、あなたはそれを修正するつもりです。ありがとう。 –

は

#left { 
    float: left; 
} 
#right { 
    float: right; 
}

Working Fiddle

出典

2016-04-06 06:25:37

はちょうどあなたの期待される結果ごとに行います。このCSSを追加します：あなたは、コードの下に試すことができ

出典

2016-04-06 06:27:33 ketan

使用ブートストラップはbootstrap girdsの例を参照してくださいgirds hereも参照

出典

2016-04-06 06:27:48

あなたはブートストラップを使用しているときは...

出典

2016-04-06 06:28:24 ameenulla0007

ありがとう！それは働く。 :) –

よろしくお願いします。:) – ameenulla0007

あなたのコード内で、とにかく、ブートストラップが含まれている..

<div class="row"> 
    <div class="col-lg-9"> 
    Your Left content 
    </div> 
    <div class="col-lg-3"> 
    Your right content 
    </div> 
</div>

最も簡単な方法を使用することができますので、あなたは、ブートストラップクラスを使用することができます。

<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>

出典

2016-04-06 06:29:13 induprakash

グリッドを横並びにしたい場合を除いて、 'col-xs-12'は必須ではありません。言及しなければ、デフォルトでは、この場合はすべての画面で12列になります。 – ameenulla0007

div id = "right"

それはちょうどそれにIDを付与、右にあなたのdivを配置しません。

div class = "row"

でのdivの両方を囲み、その後、子供が列スパンを使用してのdiv。

ここでは、ブートストラップグリッドシステムについて学ぶ： -

http://www.w3schools.com/bootstrap/bootstrap_grid_system.asp

出典

2016-04-06 06:29:40 david419

を "ミート会社" div前に、 "お問い合わせ" divを入れてください。次に、両方の要素にfloat:left;を適用します。可能な限りfloat:right;を回避してください。

そうでなければ、divにはdisplay:inline-blockを使用できます。浮動小数点のように機能し、その上に垂直に配置することもできます。

出典

2016-04-06 06:32:08 Roy

HTML、CSS、私のコードで何が間違っているのか分かりません

答えて

関連する問題