Question

我正在尝试将一些信息放在我使用Div创建的侧面板旁边。

我试图将文本浮动在左侧，但这并没有奏效。

这就是我所拥有的 Click here

这就是我想要的 Click here

我会告诉你我的页面以及我正在使用的样式表：D

页： FitnessHub

    <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

首先，请注意您的代码容易受到SQL注入攻击。您应该使用参数化查询或至少转义它们。

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

其次，将两个项目都悬空：

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

Answer 2

你错过了：你的风格，

.WelcomeText {
    Float: left;
}

Answer 3

您可以删除 float：left 和添加display：inline-block ;对于侧面板和欢迎文本类。

div的默认显示属性是block，这意味着它将被强制在sidePanel div下面。

所以快速解决这个问题就是使用内联块属性。

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

.WelcomeText {
  display: inline-block;
}

这里有一个很好的解释，为什么inline-block现在更适合浮动：https://stackoverflow.com/a/15177860/5995092

“显示的巨大好处：内联块是当其他开发人员稍后维护您的代码时，更明显的是显示：inline-block和text-align：right正在尝试完成浮动：左或浮动：右声明。“ - Alex W。

将文字放在侧面板旁边

3 个答案: