我无法将div向上移动？ 但是我可以左右移动吗？
[英]I cant move my div, up? yet i can move it left and right?
问题描述
我正在尝试设计一个简单的网站，并且使用磨砂玻璃效果制作了一个div，现在可以左右移动它了，但似乎无法向上移动！ 有问题的div具有产品面板的名称。
*{ margin: 0; padding: 0; } .background{ background-image: url("http://www.kubipet.com/data/out/55/iwp779807523-electrical-wallpapers.jpg"); background-repeat: no-repeat; background-attachment: fixed; background-size: cover; } #header-frosted{ background: inherit; position: relative; width:100%; height: 200px; } .jumbotron-fluid{ background: inherit; padding-left: 0px; padding-right:0px; padding-top:0px; padding-bottom: 0px; margin-bottom: 0px; width: 100%; color:rgb(0, 0, 0); } .display-3{ text-align: center; margin-top:50px; } .navbar.main { background-color:rgb(0, 0, 0); color: rgb(255, 255, 255); margin-top: 0px; border-style: none; border-radius: 0%; } .nav-pills{ margin-top:2px; text-align: center; margin-top:5px; margin-bottom: 0px; } #tab{ color: white; } #tab:hover { background-color: rgb(63, 60, 60); } .frosted-glass { width:10%; height:auto; background: inherit; position: relative; z-index: 1; overflow: hidden; margin: 30px,30px,30px,30px; padding: 2rem; box-sizing: border-box; } .frosted-glass::before { width:auto; height:auto; content: ""; position: absolute; z-index: -1; top: 0; right: 0; bottom: 0; left: 0; background: inherit; box-shadow: inset 0 0 3000px rgba(255,255,255,.5); filter: blur(5px); } #product-panel{ width:500px; height: 400px; text-align:left; position: absolute; margin-top:20px; } #contact-details{ width:200px; height: 330px; text-align:left; margin-left: auto; margin-bottom: 100px; position: relative; } #details{ text-align: center; }
enter code here `<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" media="screen" href="fonts\\css\\font-awesome.min.css"> <link rel="stylesheet" type="text/css" media="screen" href="css\\KAD-css.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <title>Website</title> </head> <body class="background"> <div class="jumbotron jumbotron-fluid frosted-glass" id="header-frosted" > <div class="container img-responsive"> <h1 class="display-3">Random Title</h1> </div> </div> <nav class="navbar navbar-expand-lg navbar-dark navbar-default main" > <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#"id="tab">Random Title</a> </div> <div class="collapse navbar-collapse text-centre" id="myNavbar"> <ul class="nav nav-pills center-pills"> <li class="nav-item "> <a class="nav-link" href="#" id="tab"> Random1 </a> </li> <li class="nav-item "> <a class="nav-link" href="#"id="tab"> Random2 </a> </li> <li class="nav-item"> <a class="nav-link" href="#"id="tab"> Random3 </a> </li> </ul> <ul class="nav navbar-nav navbar-right"> </ul> </div> </div> </nav>' <div class="frosted-glass" id="contact-details"> <h3 id="details">Contact Details</h3> <p><strong>Name:</strong>John Doe</p> <p><strong>Phone Number:</strong> 000000000</p> <h3>Address:</h3> <strong><p>Random Title.</p> <p>PO Box 000</p> <p>Random Town, Random Country</p> <p>000</p> </strong> </div> <!--Product Panel--> <div class="frosted-glass" id="product-panel"> This is the div in question. </div> </body> </html>
请记住，我刚开始进行网页设计时会提供一些帮助和意见，我们非常感谢。
4 个解决方案
解决方案1
1 2018-02-16 07:19:31
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" media="screen" href="fonts\css\font-awesome.min.css">
<link rel="stylesheet" type="text/css" media="screen" href="css\KAD-css.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<title>Website</title>
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
<style>
*{
margin: 0;
padding: 0;
}
.background{
background-image: url("http://www.kubipet.com/data/out/55/iwp779807523-electrical-wallpapers.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
#header-frosted{
background: inherit;
position: relative;
width:100%;
height: 200px;
}
.jumbotron-fluid{
background: inherit;
padding-left: 0px;
padding-right:0px;
padding-top:0px;
padding-bottom: 0px;
margin-bottom: 0px;
width: 100%;
color:rgb(0, 0, 0);
}
.display-3{
text-align: center;
margin-top:50px;
}
.navbar.main {
background-color:rgb(0, 0, 0);
color: rgb(255, 255, 255);
margin-top: 0px;
border-style: none;
border-radius: 0%;
}
.nav-pills{
margin-top:2px;
text-align: center;
margin-top:5px;
margin-bottom: 0px;
}
#tab{
color: white;
}
#tab:hover {
background-color: rgb(63, 60, 60);
}
.frosted-glass {
width:10%;
height:auto;
background: inherit;
position: relative;
z-index: 1;
overflow: hidden;
margin: 30px,30px,30px,30px;
padding: 2rem;
box-sizing: border-box;
}
.frosted-glass::before {
width:auto;
height:auto;
content: "";
position: absolute;
z-index: -1;
top: 0; right: 0; bottom: 0; left: 0;
background: inherit;
box-shadow: inset 0 0 3000px rgba(255,255,255,.5);
filter: blur(5px);
}
#product-panel{
width:500px;
height: 400px;
text-align:left;
position: absolute;
margin-top:20px;
}
#contact-details{
width:200px;
height: 330px;
text-align:left;
margin-left: auto;
margin-bottom: 100px;
position: relative;
}
#details{
text-align: center;
}
/*
Start of Code - Laxmikant Killekar
*/
body{
overflow-x: hidden;
}
/*
End of Code - Laxmikant Killekar
*/
</style>
</head>
<body class="background">
<div class="jumbotron jumbotron-fluid frosted-glass" id="header-frosted" >
<div class="container img-responsive">
<h1 class="display-3">Random Title</h1>
</div>
</div>
<nav class="navbar navbar-expand-lg navbar-dark navbar-default main" >
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"id="tab">Random Title</a>
</div>
<div class="collapse navbar-collapse text-centre" id="myNavbar">
<ul class="nav nav-pills center-pills">
<li class="nav-item ">
<a class="nav-link" href="#" id="tab"> Random1</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="#"id="tab"> Random2 </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"id="tab"> Random3</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
</ul>
</div>
</div>
</nav>
<!-- Start of Code - Laxmikant Killekar -->
<div class="fluid-container">
<div class="row">
<div class="col-md-6">
<!--Product Panel-->
<div class="frosted-glass" id="product-panel">
This is the div in question.
</div>
</div>
<div class="col-md-4 pull-right">
<div class="frosted-glass" id="contact-details">
<h3 id="details">Contact Details</h3>
<p><strong>Name:</strong>John Doe</p>
<p><strong>Phone Number:</strong> 000000000</p>
<h3>Address:</h3>
<strong><p>Random Title.</p>
<p>PO Box 000</p>
<p>Random Town, Random Country</p>
<p>000</p>
</strong>
</div>
</div>
</div>
</div>
<!--End of Code - Laxmikant Killekar-->
</body>
</html>
解决方案2
0 2018-02-16 06:48:59
在此添加top：（value）px
#product-panel{
width:500px;
height: 400px;
text-align:left;
position: absolute;
margin-top:20px;
top:320px;
}
你可以改变位置
*{ margin: 0; padding: 0; } .background{ background-image: url("http://www.kubipet.com/data/out/55/iwp779807523-electrical-wallpapers.jpg"); background-repeat: no-repeat; background-attachment: fixed; background-size: cover; } #header-frosted{ background: inherit; position: relative; width:100%; height: 200px; } .jumbotron-fluid{ background: inherit; padding-left: 0px; padding-right:0px; padding-top:0px; padding-bottom: 0px; margin-bottom: 0px; width: 100%; color:rgb(0, 0, 0); } .display-3{ text-align: center; margin-top:50px; } .navbar.main { background-color:rgb(0, 0, 0); color: rgb(255, 255, 255); margin-top: 0px; border-style: none; border-radius: 0%; } .nav-pills{ margin-top:2px; text-align: center; margin-top:5px; margin-bottom: 0px; } #tab{ color: white; } #tab:hover { background-color: rgb(63, 60, 60); } .frosted-glass { width:10%; height:auto; background: inherit; position: relative; z-index: 1; overflow: hidden; margin: 30px,30px,30px,30px; padding: 2rem; box-sizing: border-box; } .frosted-glass::before { width:auto; height:auto; content: ""; position: absolute; z-index: -1; top: 0; right: 0; bottom: 0; left: 0; background: inherit; box-shadow: inset 0 0 3000px rgba(255,255,255,.5); filter: blur(5px); } #product-panel{ width:500px; height: 400px; text-align:left; position: absolute; margin-top:20px; top:320px; } #contact-details{ width:200px; height: 330px; text-align:left; margin-left: auto; margin-bottom: 100px; position: relative; } #details{ text-align: center; }
enter code here `<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" media="screen" href="fonts\\css\\font-awesome.min.css"> <link rel="stylesheet" type="text/css" media="screen" href="css\\KAD-css.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <title>Website</title> </head> <body class="background"> <div class="jumbotron jumbotron-fluid frosted-glass" id="header-frosted" > <div class="container img-responsive"> <h1 class="display-3">Random Title</h1> </div> </div> <nav class="navbar navbar-expand-lg navbar-dark navbar-default main" > <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#"id="tab">Random Title</a> </div> <div class="collapse navbar-collapse text-centre" id="myNavbar"> <ul class="nav nav-pills center-pills"> <li class="nav-item "> <a class="nav-link" href="#" id="tab"> Random1 </a> </li> <li class="nav-item "> <a class="nav-link" href="#"id="tab"> Random2 </a> </li> <li class="nav-item"> <a class="nav-link" href="#"id="tab"> Random3 </a> </li> </ul> <ul class="nav navbar-nav navbar-right"> </ul> </div> </div> </nav>' <div class="frosted-glass" id="contact-details"> <h3 id="details">Contact Details</h3> <p><strong>Name:</strong>John Doe</p> <p><strong>Phone Number:</strong> 000000000</p> <h3>Address:</h3> <strong><p>Random Title.</p> <p>PO Box 000</p> <p>Random Town, Random Country</p> <p>000</p> </strong> </div> <!--Product Panel--> <div class="frosted-glass" id="product-panel"> This is the div in question. </div> </body> </html>
解决方案3
0 已采纳 2018-02-16 06:53:01
这是codepen，请告诉我它是否解决了您的问题
将您的<div class="frosted-glass" id="product-panel">
在<div class="frosted-glass" id="contact-details">
解决方案4
0 2018-02-16 06:58:50
当您在一行中使用多个项目时，它应满足宽度比例。因此，给定宽度百分比'％'而不是像素'px'，在这里您可以使用float：left在一行中包含多个项目。 尝试以百分比形式使用宽度，这是大多数开发人员使用的方式
*{ margin: 0; padding: 0; } .background{ background-image: url("http://www.kubipet.com/data/out/55/iwp779807523-electrical-wallpapers.jpg"); background-repeat: no-repeat; background-attachment: fixed; background-size: cover; } #header-frosted{ background: inherit; position: relative; width:100%; height: 200px; } .jumbotron-fluid{ background: inherit; padding-left: 0px; padding-right:0px; padding-top:0px; padding-bottom: 0px; margin-bottom: 0px; width: 100%; color:rgb(0, 0, 0); } .display-3{ text-align: center; margin-top:50px; } .navbar.main { background-color:rgb(0, 0, 0); color: rgb(255, 255, 255); margin-top: 0px; border-style: none; border-radius: 0%; } .nav-pills{ margin-top:2px; text-align: center; margin-top:5px; margin-bottom: 0px; } #tab{ color: white; } #tab:hover { background-color: rgb(63, 60, 60); } .frosted-glass { width:10%; height:auto; background: inherit; position: relative; z-index: 1; overflow: hidden; margin: 30px,30px,30px,30px; padding: 2rem; box-sizing: border-box; } .frosted-glass::before { width:auto; height:auto; content: ""; position: absolute; z-index: -1; top: 0; right: 0; bottom: 0; left: 0; background: inherit; box-shadow: inset 0 0 3000px rgba(255,255,255,.5); filter: blur(5px); } #product-panel{ width:70%; height: 400px; text-align:left; float:left; } #contact-details{ width:30%; height: 330px; text-align:left; margin-left: auto; margin-bottom: 100px; float:left; } #details{ text-align: center; }
enter code here `<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" media="screen" href="fonts\\css\\font-awesome.min.css"> <link rel="stylesheet" type="text/css" media="screen" href="css\\KAD-css.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <title>Website</title> </head> <body class="background"> <div class="jumbotron jumbotron-fluid frosted-glass" id="header-frosted" > <div class="container img-responsive"> <h1 class="display-3">Random Title</h1> </div> </div> <nav class="navbar navbar-expand-lg navbar-dark navbar-default main" > <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#"id="tab">Random Title</a> </div> <div class="collapse navbar-collapse text-centre" id="myNavbar"> <ul class="nav nav-pills center-pills"> <li class="nav-item "> <a class="nav-link" href="#" id="tab"> Random1 </a> </li> <li class="nav-item "> <a class="nav-link" href="#"id="tab"> Random2 </a> </li> <li class="nav-item"> <a class="nav-link" href="#"id="tab"> Random3 </a> </li> </ul> <ul class="nav navbar-nav navbar-right"> </ul> </div> </div> </nav>' <!--Product Panel--> <div class="frosted-glass" id="product-panel"> This is the div in question. </div> <div class="frosted-glass" id="contact-details"> <h3 id="details">Contact Details</h3> <p><strong>Name:</strong>John Doe</p> <p><strong>Phone Number:</strong> 000000000</p> <h3>Address:</h3> <strong><p>Random Title.</p> <p>PO Box 000</p> <p>Random Town, Random Country</p> <p>000</p> </strong> </div> </body> </html>
我已经为外部div编写了代码，我可以在其中上下移动，但不能左右移动
[英]I have written code for outer div, where I am able to move up and down but unable to move left right
当我在左侧切换 div 时，如果图像顶部不在整页中，则移动我的图像
[英]When I toggle div in left the right side move my image if the top of image is not in full page
通过在JQuery中单击另一个div向左/向右和向上/向下移动Div
[英]Move Div left/right and Up/Down by clicking on another div in JQuery
div-鼠标移动时-向左，向右，向上，向下？ （JavaScript的）
[英]div - on mouse move - to left, to right, to up, to down? (javascript)
如何获得输入文本，使之向左移至前一个标签的上方？
[英]How can I get my input text to move to the left up against the preceding label?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.