我只是想知道是否可以将此（image1）移动到（image2）。我不想使用position:relative因为这会破坏我在bootstrap中的设计。
图片1（我不想在这里）
http://puu.sh/ciBCF/3d1d6b202a.png
图片2（我想在这里）
http://puu.sh/ciBET/0f44f62b3f.png
我的CSS代码
.results {
color: red;
display: block;
font-size: 20px;
text-align:center;
text-decoration: none;
font-weight: bold;
background: #232323;
color:red;
font-family: 'Julius Sans One', sans-serif;
font-size: 150%;
}
提前致谢：）
更新整个代码：
<?php
session_start();
include ('../includes/config.php');
include ('../includes/header.php');
?>
<!DOCTYPE HTML>
<html>
<body>
<!--start header-->
<div class="h_bg">
<div class="wrap">
<div class="wrapper">
<div class="header">
<div class="logo">
<a href="index.php"><img src="../images/logo.png"> </a>
</div>
<div class="cssmenu">
<ul>
<li><a href="index.php"><span>Home</span></a></li>
<li class="active"><a href="about.php"><span>About</span></a></li>
<li class="has-sub"><a href="service.php"><span>Gallery</span></a>
</li>
<li class="last"><a href="contact.php"><span>Contact</span></a></li>
<div class="clear"></div>
<div class="search">
<h2>search</h2>
<form>
<input type="text" value="" placeholder="Enter Your search...">
<input type="submit" value="">
</form>
</div>
<div class="search1">
<h2>login/Register</h2>
<form action="" method="POST">
<label>Username:</label>
<input type="text" id="password" name="username" required />
<label>Password:</label>
<input type="password" id="password" name="password" required />
<input type="submit" value="Login" name="submit" class="submit" />
<br><br>
<center>
<h2><p><a href="register.php">Register</a></p></h2>
</center>
</form>
</div>
<?php
if(isset($_POST["submit"])){
if(!empty($_POST['username']) && !empty($_POST['password'])) {
$username=$_POST['username'];
$password=$_POST['password'];
$password = strip_tags($password);
$password = md5($password); // md5 is used to encrypt your password to make it more secure.
$query=mysql_query("SELECT * FROM login WHERE username='".$username."' AND password='".$password."'");
$numrows=mysql_num_rows($query);
if($numrows!=0)
{
while($row=mysql_fetch_assoc($query))
{
$dbusername=$row['username'];
$dbpassword=$row['password'];
}
if($username == $dbusername && $password == $dbpassword)
{
session_start();
$_SESSION['sess_user']=$username;
/* Redirect browser */
header("Location: member.php");
}
} else {
echo "<div class='results'>Invalid username or password</div>";
}
} else {
echo "All fields are required!";
}
}
?>
</div>
</ul>
</div>
<div class="clear"></div>
</div>
</div>
</div>
</div>
<!-- start content -->
<div class="content_bg">
<div class="wrap">
<div class="wrapper">
<div class="main">
<h2 class="style">About us</h2>
<div class="about">
<div class="cont-grid-img img_style">
<img src="../images/about_pic.jpg" alt=""></a>
</div>
<div class="cont-grid">
<div class="abt-style">
<p class="style top">We are a company built on dreams. And these dreams inspire us to create innovative products that enhance human mobility and benefit society. We see "The Power of Dreams" as a way of thinking that guides us and inspires us to move forward. The strength of our company comes from this philosophy—based on the visionary principles of our founder, Soichiro Honda.Our success in the global marketplace is the result of our continued investment in America's future. We thank our customers for the support and trust they've shown us. We look forward to challenging ourselves to create new products and services that bring value to our customers and society during the next 50 years.</p>
</div>
<div class="clear"></div>
</div>
<div class="clear"></div>
<div class="about-p top">
<p class="style">Honda's global lineup consists of the Fit, Civic, Accord, Insight, CR-V, CR-Z, Legend and two versions of the Odyssey, one for North America, and a smaller vehicle sold internationally. An early proponent of developing vehicles to cater to different needs and markets worldwide, Honda's lineup varies by country and may have vehicles exclusive to that region. A few examples are the latest Honda Odyssey minivan and the Ridgeline, Honda's first light-duty uni-body pickup truck. Both were designed and engineered primarily in North America and are produced there. Other example of exclusive models includes the Honda Civic five-door hatchback sold in Europe.
Honda's automotive manufacturing ambitions can be traced back to 1963, with the Honda T360, a kei car truck built for the Japanese market.[27] This was followed by the two-door roadster, the Honda S500 also introduced in 1963. In 1965, Honda built a two-door commercial delivery van, called the Honda L700. Honda's first four-door sedan was not the Accord, but the air-cooled, four-cylinder, gasoline-powered Honda 1300 in 1969. The Civic was a hatchback that gained wide popularity internationally, but it wasn't the first two-door hatchback built. That was the Honda N360, another Kei car that was adapted for international sale as the N600. The Civic, which appeared in 1972 and replaced the N600 also had a smaller sibling that replaced the air-cooled N360, called the Honda Life that was water-cooled.
The Honda Life represented Honda's efforts in competing in the kei car segment, offering sedan, delivery van and small pick-up platforms on a shared chassis. The Life StepVan had a novel approach that, while not initially a commercial success, appears to be an influence in vehicles with the front passengers sitting behind the engine, a large cargo area with a flat roof and a liftgate installed in back, and utilizing a transversely installed engine with a front-wheel-drive powertrain.</p>
</div>
</div>
<div class="clear"></div>
</div>
</div>
</div>
</div>
<div class="footer_bg">
<div class="wrap">
<div class="wrapper">
<div class="footer">
<div class="copy">
<p class="w3-link">© </p>
</div>
<div class="f_nav">
<ul>
<li><a href="#">Skype</a></li>
<li><a href="#">Linked in</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Facebook</a></li>
</ul>
</div>
<div class="clear"></div>
</div>
</div>
</div>
</div>
</body>
答案 0 :(得分：1)
如果css 3适合你，那么＆＃34;翻译＆＃34;，转换可能有帮助吗？
e.g：
.results {
...
transform: translate(0px,-200px);
}
您可能需要设置适当的值而不是-200px。
<强>更新
看了你的代码。
为什么不放置＆＃34; php＆＃34;您需要显示错误消息的部分？
更新2
根据OP提供的@Moob原始代码，提供代码示例。
<?php
session_start();
include ('../includes/config.php');
include ('../includes/header.php');
?>
<!DOCTYPE HTML>
<html>
<body>
<!--start header-->
<div class="h_bg">
<div class="wrap">
<div class="wrapper">
<div class="header">
<div class="logo">
<a href="index.php"><img src="../images/logo.png"> </a>
</div>
<div class="cssmenu">
<ul>
<li><a href="index.php"><span>Home</span></a></li>
<li class="active"><a href="about.php"><span>About</span></a></li>
<li class="has-sub"><a href="service.php"><span>Gallery</span></a>
</li>
<li class="last"><a href="contact.php"><span>Contact</span></a></li>
<div class="clear"></div>
<div class="search">
<h2>search</h2>
<form>
<input type="text" value="" placeholder="Enter Your search...">
<input type="submit" value="">
</form>
</div>
<div class="search1">
<?php
if(isset($_POST["submit"])){
if(!empty($_POST['username']) && !empty($_POST['password'])) {
$username=$_POST['username'];
$password=$_POST['password'];
$password = strip_tags($password);
$password = md5($password); // md5 is used to encrypt your password to make it more secure.
$query=mysql_query("SELECT * FROM login WHERE username='".$username."' AND password='".$password."'");
$numrows=mysql_num_rows($query);
if($numrows!=0)
{
while($row=mysql_fetch_assoc($query))
{
$dbusername=$row['username'];
$dbpassword=$row['password'];
}
if($username == $dbusername && $password == $dbpassword)
{
session_start();
$_SESSION['sess_user']=$username;
/* Redirect browser */
header("Location: member.php");
}
} else {
echo "<div class='results'>Invalid username or password</div>";
}
} else {
echo "All fields are required!";
}
}
?>
<h2>login/Register</h2>
<form action="" method="POST">
<label>Username:</label>
<input type="text" id="password" name="username" required />
<label>Password:</label>
<input type="password" id="password" name="password" required />
<input type="submit" value="Login" name="submit" class="submit" />
<br><br>
<center>
<h2><p><a href="register.php">Register</a></p></h2>
</center>
</form>
</div>
</div>
</ul>
</div>
<div class="clear"></div>
</div>
</div>
</div>
</div>
<!-- start content -->
<div class="content_bg">
<div class="wrap">
<div class="wrapper">
<div class="main">
<h2 class="style">About us</h2>
<div class="about">
<div class="cont-grid-img img_style">
<img src="../images/about_pic.jpg" alt=""></a>
</div>
<div class="cont-grid">
<div class="abt-style">
<p class="style top">We are a company built on dreams. And these dreams inspire us to create innovative products that enhance human mobility and benefit society. We see "The Power of Dreams" as a way of thinking that guides us and inspires us to move forward. The strength of our company comes from this philosophy—based on the visionary principles of our founder, Soichiro Honda.Our success in the global marketplace is the result of our continued investment in America's future. We thank our customers for the support and trust they've shown us. We look forward to challenging ourselves to create new products and services that bring value to our customers and society during the next 50 years.</p>
</div>
<div class="clear"></div>
</div>
<div class="clear"></div>
<div class="about-p top">
<p class="style">Honda's global lineup consists of the Fit, Civic, Accord, Insight, CR-V, CR-Z, Legend and two versions of the Odyssey, one for North America, and a smaller vehicle sold internationally. An early proponent of developing vehicles to cater to different needs and markets worldwide, Honda's lineup varies by country and may have vehicles exclusive to that region. A few examples are the latest Honda Odyssey minivan and the Ridgeline, Honda's first light-duty uni-body pickup truck. Both were designed and engineered primarily in North America and are produced there. Other example of exclusive models includes the Honda Civic five-door hatchback sold in Europe.
Honda's automotive manufacturing ambitions can be traced back to 1963, with the Honda T360, a kei car truck built for the Japanese market.[27] This was followed by the two-door roadster, the Honda S500 also introduced in 1963. In 1965, Honda built a two-door commercial delivery van, called the Honda L700. Honda's first four-door sedan was not the Accord, but the air-cooled, four-cylinder, gasoline-powered Honda 1300 in 1969. The Civic was a hatchback that gained wide popularity internationally, but it wasn't the first two-door hatchback built. That was the Honda N360, another Kei car that was adapted for international sale as the N600. The Civic, which appeared in 1972 and replaced the N600 also had a smaller sibling that replaced the air-cooled N360, called the Honda Life that was water-cooled.
The Honda Life represented Honda's efforts in competing in the kei car segment, offering sedan, delivery van and small pick-up platforms on a shared chassis. The Life StepVan had a novel approach that, while not initially a commercial success, appears to be an influence in vehicles with the front passengers sitting behind the engine, a large cargo area with a flat roof and a liftgate installed in back, and utilizing a transversely installed engine with a front-wheel-drive powertrain.</p>
</div>
</div>
<div class="clear"></div>
</div>
</div>
</div>
</div>
<div class="footer_bg">
<div class="wrap">
<div class="wrapper">
<div class="footer">
<div class="copy">
<p class="w3-link">© </p>
</div>
<div class="f_nav">
<ul>
<li><a href="#">Skype</a></li>
<li><a href="#">Linked in</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Facebook</a></li>
</ul>
</div>
<div class="clear"></div>
</div>
</div>
</div>
</div>
</body>
答案 1 :(得分：0)
你可以考虑使用css：after
http://www.w3schools.com/cssref/sel_after.asp
.search1::after {
color: red;
display: block;
font-size: 20px;
text-align:center;
text-decoration: none;
font-weight: bold;
background: #232323;
color:red;
font-family: 'Julius Sans One', sans-serif;
font-size: 150%;
content: "your content here";
}
使用脚本根据php响应隐藏或显示它。
编辑：整个代码插图
添加此CSS：
.search1::after
{
display:block;
content:attr(data-content);
}
<?php
session_start();
include ('../includes/config.php');
include ('../includes/header.php');
?>
<!DOCTYPE HTML>
<html>
<body>
<!--start header-->
<div class="h_bg">
<div class="wrap">
<div class="wrapper">
<div class="header">
<div class="logo">
<a href="index.php"><img src="../images/logo.png"> </a>
</div>
<div class="cssmenu">
<ul>
<li><a href="index.php"><span>Home</span></a></li>
<li class="active"><a href="about.php"><span>About</span></a></li>
<li class="has-sub"><a href="service.php"><span>Gallery</span></a>
</li>
<li class="last"><a href="contact.php"><span>Contact</span></a></li>
<div class="clear"></div>
<div class="search">
<h2>search</h2>
<form>
<input type="text" value="" placeholder="Enter Your search...">
<input type="submit" value="">
</form>
</div>
<div class="search1">
<h2>login/Register</h2>
<form action="" method="POST">
<label>Username:</label>
<input type="text" id="password" name="username" required />
<label>Password:</label>
<input type="password" id="password" name="password" required />
<input type="submit" value="Login" name="submit" class="submit" />
<br><br>
<center>
<h2><p><a href="register.php">Register</a></p></h2>
</center>
</form>
</div>
<?php
if(isset($_POST["submit"])){
if(!empty($_POST['username']) && !empty($_POST['password'])) {
$username=$_POST['username'];
$password=$_POST['password'];
$password = strip_tags($password);
$password = md5($password); // md5 is used to encrypt your password to make it more secure.
$query=mysql_query("SELECT * FROM login WHERE username='".$username."' AND password='".$password."'");
$numrows=mysql_num_rows($query);
if($numrows!=0)
{
while($row=mysql_fetch_assoc($query))
{
$dbusername=$row['username'];
$dbpassword=$row['password'];
}
if($username == $dbusername && $password == $dbpassword)
{
session_start();
$_SESSION['sess_user']=$username;
/* Redirect browser */
header("Location: member.php");
}
} else {
echo "$('.search1').attr('data-content','Your text Here');";
}
} else {
echo "All fields are required!";
}
}
?>
</div>
</ul>
</div>
<div class="clear"></div>
</div>
</div>
</div>
</div>
<!-- start content -->
<div class="content_bg">
<div class="wrap">
<div class="wrapper">
<div class="main">
<h2 class="style">About us</h2>
<div class="about">
<div class="cont-grid-img img_style">
<img src="../images/about_pic.jpg" alt=""></a>
</div>
<div class="cont-grid">
<div class="abt-style">
<p class="style top">We are a company built on dreams. And these dreams inspire us to create innovative products that enhance human mobility and benefit society. We see "The Power of Dreams" as a way of thinking that guides us and inspires us to move forward. The strength of our company comes from this philosophy—based on the visionary principles of our founder, Soichiro Honda.Our success in the global marketplace is the result of our continued investment in America's future. We thank our customers for the support and trust they've shown us. We look forward to challenging ourselves to create new products and services that bring value to our customers and society during the next 50 years.</p>
</div>
<div class="clear"></div>
</div>
<div class="clear"></div>
<div class="about-p top">
<p class="style">Honda's global lineup consists of the Fit, Civic, Accord, Insight, CR-V, CR-Z, Legend and two versions of the Odyssey, one for North America, and a smaller vehicle sold internationally. An early proponent of developing vehicles to cater to different needs and markets worldwide, Honda's lineup varies by country and may have vehicles exclusive to that region. A few examples are the latest Honda Odyssey minivan and the Ridgeline, Honda's first light-duty uni-body pickup truck. Both were designed and engineered primarily in North America and are produced there. Other example of exclusive models includes the Honda Civic five-door hatchback sold in Europe.
Honda's automotive manufacturing ambitions can be traced back to 1963, with the Honda T360, a kei car truck built for the Japanese market.[27] This was followed by the two-door roadster, the Honda S500 also introduced in 1963. In 1965, Honda built a two-door commercial delivery van, called the Honda L700. Honda's first four-door sedan was not the Accord, but the air-cooled, four-cylinder, gasoline-powered Honda 1300 in 1969. The Civic was a hatchback that gained wide popularity internationally, but it wasn't the first two-door hatchback built. That was the Honda N360, another Kei car that was adapted for international sale as the N600. The Civic, which appeared in 1972 and replaced the N600 also had a smaller sibling that replaced the air-cooled N360, called the Honda Life that was water-cooled.
The Honda Life represented Honda's efforts in competing in the kei car segment, offering sedan, delivery van and small pick-up platforms on a shared chassis. The Life StepVan had a novel approach that, while not initially a commercial success, appears to be an influence in vehicles with the front passengers sitting behind the engine, a large cargo area with a flat roof and a liftgate installed in back, and utilizing a transversely installed engine with a front-wheel-drive powertrain.</p>
</div>
</div>
<div class="clear"></div>
</div>
</div>
</div>
</div>
<div class="footer_bg">
<div class="wrap">
<div class="wrapper">
<div class="footer">
<div class="copy">
<p class="w3-link">© </p>
</div>
<div class="f_nav">
<ul>
<li><a href="#">Skype</a></li>
<li><a href="#">Linked in</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Facebook</a></li>
</ul>
</div>
<div class="clear"></div>
</div>
</div>
</div>
</div>
</body>
答案 2 :(得分：0)
你可以把表格中的div放在你想要它的地方，设置一个id并在css中设置它显示none，然后在你的代码的else块中，你现在回显了div的删除和使用如果出现错误，则显示div。即
else{ ?>
<script>document.getElementById("your_chosen_id").style.display="block";</script>
<noscript><div class='results' style='position:relative;top:-200px;>Invalid username or password</div></noscript>
<?php
添加了noscript，因为Moob正确地指出它显然不会关闭js。