サイドパネルの横にテキストを置いてください

Question

私はDiv'sを使用して作成したサイドパネルの横に情報を表示しようとしています。

私は左にテキストを浮かそうとしましたが、これはうまくいきませんでした。ここで

は私が Click here

持っているものであり、これは私が Click here

何をしたい私はあなたに私のページを表示し、私も使っているスタイルシートでしょうです：D

ページ： フィットネスハブ

<div class="SidePanel"> 
     Text  
    </div> 

    <div class="WelcomeText">  

    </div> 

<?php 
$db = new mysqli("127.0.0.1", "root", "root", "fitnessbooking"); 
$query= $db->query("select Username from users where Username = '$_POST[username]' and Pass = '$_POST[password]'"); 

if ($query->num_rows ==1){ 
echo ""; 
} 
else { 
header("Location: http://localhost/pages/login.php?fail=1"); 

    exit; 
} 
?> 





</body> 
</html> 

スタイルシート：

.SidePanel { 
    background-color: white; 
    width: 250px; 
    height: 100%; 
} 

.WelcomeText { 
    Float left; 
} 

Answer 1

あなたが不足している：あなたのスタイルで、

.WelcomeText { 
    Float: left; 
} 

Answer 2

まず、あなたのコードは、SQLインジェクション攻撃を受けやすいことをお勧めします。パラメータ化されたクエリを使用するか、少なくともエスケープする必要があります。

http://php.net/manual/en/security.database.sql-injection.php

第二に、両方の項目をフロート左：

.SidePanel { float: left; } 
.WelcomeText { float: left; } 

Answer 3

をあなたはフロートを削除することができます：ディスプレイを追加とを左：インラインブロック。サイドパネルとウェルカムテキストの両方のクラスに適用されます。

divのデフォルトの表示プロパティはblockです。つまり、sidePanel divの下に強制的に表示されます。

これを簡単に回避するには、inline-blockプロパティを使用します。ここで

.SidePanel { 
    background-color: white; 
    width: 250px; 
    height: 100%; 
    display: inline-block; 
} 

.WelcomeText { 
    display: inline-block; 
} 

はインラインブロックは今浮くことが好ましい理由の偉大な説明です：https://stackoverflow.com/a/15177860/5995092

「ディスプレイの大きなメリット：インラインブロックは、他の開発者がAで、あなたのコードを維持しているときということです後で述べるように、inline-blockとtext-align：rightがfloat：leftまたはfloat：right文よりも達成しようとしている表示がはっきりしています。-Alex W。