HTML, CSS, benim koduyla neyi yanlış bilmiyorum ama alışkanlık istediğim pozisyonunu göstermek sorun ne benim kod

ile bilmiyorum. İşte HTML, CSS, benim koduyla neyi yanlış bilmiyorum ama alışkanlık istediğim pozisyonunu göstermek sorun ne benim kod

çıkışı var:

Output of my code

Ve işte benim kod: istediğim

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

sağ yer olmamızı karşılamak bize iletişim sırasında solda ama onları gösterdiğim yere yer yok. temas bize bizi ve <div id="left"> karşılar içinde

Ben <div id="right"> koyduk.

Burada ++ notepad kullanıyorum.

This is my expected output

yardım edin. Teşekkürler!

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

kaynak

2016-04-06 Yharie Tuazon

bu css'e dayanmaktadır, css'nizi buraya gönderin, en azından #left ve #right gibi ilgili bazı şeyleri gönderin. – ameenulla0007

sözdizimi son yankılarınızda oldukça garip görünüyor ... https://3v4l.org/uRefC – Ekin

Oh, sağ, düzeltin. Teşekkürler. –

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

Working Fiddle

kaynak

2016-04-06 06:25:37

Sadece beklendiği sonucu başına yapacak bu css ekleyin:: Sen kodunun altına deneyebilirsiniz

kaynak

2016-04-06 06:27:33 ketan

kullanım önyükleme bootstrap girds örneğine bakınız girds bakınız ayrıca here

kaynak

2016-04-06 06:27:48

Eğer Bootstrap kullanırken size ..

kaynak

2016-04-06 06:28:24 ameenulla0007

Teşekkürler! Çalışıyor. :) –

Yup, her zaman beklersiniz :) :) – ameenulla0007

Kodunuzdaki zaten önyükleme dahil ettik ..,

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

kolay yolu kullanabilirsiniz Yani önyükleme sınıfını kullanabilirsiniz.

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

kaynak

2016-04-06 06:29:13 induprakash

Izgaralar yan yana olmak istemediğiniz sürece ve "col-xs-12" ye gerek yoktur. Bahsetmezseniz, varsayılan olarak, tüm ekranlarda bu durumda 12 sütunu. – ameenulla0007

div id = "right"

sadece ona bir kimliği verir, sağa doğru div yerleştirmez. bir

div class = "row"

içinde divs hem içine alın ve sonra alt kolon aralığını kullanarak div.

burada önyükleme ızgara sistemi hakkında bilgi: -

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

kaynak

2016-04-06 06:29:40 david419

"Meet Us" div önce "Bize Ulaşın" div koyun. Sonra öğeye her ikisi için float:left; uygulayın. Mümkün olduğunca float:right;'dan kaçınmaya çalışın.

Aksi takdirde hem div s kullanımını display:inline-block kullanabilirsiniz.Şamandıra gibi çalışacak ve bunun üstüne dikey olarak hizalayabilirsiniz.

kaynak

2016-04-06 06:32:08 Roy

HTML, CSS, benim koduyla neyi yanlış bilmiyorum ama alışkanlık istediğim pozisyonunu göstermek sorun ne benim kod

cevap

İlgili konular