使用 CSS、Javascript 和 Bootstrap 定位元素时出现问题
[英]Problems positioning element with CSS, Javascript, and Bootstrap
问题描述
I have been struggling for the past few hours with a positioning problem.
在过去的几个小时里，我一直在为定位问题而苦苦挣扎。 I have been following a basic tutorial on how to compose an image gallery from w3c: How to Create a Tabbed Image Gallery I am using bootstrap's grid system for layout, and I have been very careful not to use bootstraps class names where it might interfere with those provided in the tutorial.我一直在关注如何从 w3c 组成图像库的基本教程：如何创建选项卡式图像库我正在使用引导程序的网格系统进行布局，并且我一直非常小心不要使用引导程序 class 名称可能会干扰教程中提供的那些。 The reason is that I see myself using bootstrap for layout, but I want to be able to customize things, as well.原因是我看到自己使用引导程序进行布局，但我也希望能够自定义事物。 Basically, there is a div tag with the class title "mycontainer" with display set to none, which is then set to display: block in the javascript section.基本上，有一个带有 class 标题“mycontainer”的 div 标签，显示设置为无，然后在 javascript 部分中设置为 display: block。 That part works just fine.那部分工作得很好。 The problem is that the tutorial includes this little X, using the html code × I will include the full code below.问题是教程包括这个小X，使用html代码×我将包括下面的完整代码。 The × is supposed to be an X-out for the image, which is enlarged when a user selects one of several top images (here is a picture of it). × 应该是图像的 X-out，当用户选择几个顶部图像之一时，它会被放大（这是它的图片）。 I circled the xelement我圈出了 xelement The problem is that no matter what I do, I cannot seem to control the positioning of that X. I have tried inline style, to no avail.
问题是，无论我做什么，我似乎都无法控制那个 X 的位置。我尝试过内联样式，但无济于事。 I tried doing it exactly as the tutorial recommended, which was to use a css class to position, but with that I wasn't even able to control the coloring.我尝试完全按照教程的建议进行操作，即使用 css class 到 position，但这样我什至无法控制着色。 At least with inline styles, I was able to color the element.至少使用内联 styles，我能够为元素着色。 But padding-left, margin-left, text-align:center.但是 padding-left，margin-left，text-align:center。 I tried separately and all at once.我一次单独尝试。 None of these work, and I just simply cannot figure this out.这些都不起作用，我只是无法弄清楚。 Here is the javascript, which is included in the section.这是 javascript，包含在该部分中。 Thanks a million times for your time.感谢您的时间一百万次。
<script type="text/javascript">
function myFunction(imgs) {
var expandImg = document.getElementById("expandedImg");
var imgText = document.getElementById("imgtext");
expandImg.src = imgs.src;
imgText.innerHTML = imgs.alt;
expandImg.parentElement.style.display = "block";
}
</script>
Here is the CSS:这是 CSS：
<style>
body {
margin: 0;
font-family: Arial;
}
* {
box-sizing: border-box;
}
#column1 {
width:80%;
height:80%;
}
#column2 {
width:80%;
height:80%;
}
#column3 {
width:80%;
height:80%;
}
#column4 {
width:80%;
height:80%;
}
.col-lg-3{
float: left;
padding:10px;
}
<!--Style the images inside the grid-->
.col-lg-3 img {
opacity: 0.8;
cursor: pointer;
}
.col-lg-3 img:hover {
opacity: 1;
}
/*Clear floatsd after the columns */
.row:after {
content: "";
display:table;
clear:both;
}
<!--The expanding image container (positioning is needed to position the close button and the text -->
**.mycontainer {
position:relative;
display:none;
}
#imgtext {
position:absolute;
bottom:60px;
left:60px;
color:white;
font-size:20px;
}
#expandedImg {
display:block;
padding-left:50%;
}**
/* Closable button inside the image */
.closebtn {
position: absolute;
top: 250px;
right: 250px;
color: hotpink;
font-size: 35px;
cursor: pointer;
}
</style>
And here is the entire page with HTML:这是 HTML 的整个页面：
<!DOCTYPE html>
<html lang="en">
<head>
<title>The Dream of Bonsai</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
function myFunction(imgs) {
var expandImg = document.getElementById("expandedImg");
var imgText = document.getElementById("imgtext");
expandImg.src = imgs.src;
imgText.innerHTML = imgs.alt;
expandImg.parentElement.style.display = "block";
}
</script>
<style>
body {
margin: 0;
font-family: Arial;
}
* {
box-sizing: border-box;
}
#column1 {
width:80%;
height:80%;
}
#column2 {
width:80%;
height:80%;
}
#column3 {
width:80%;
height:80%;
}
#column4 {
width:80%;
height:80%;
}
.col-lg-3{
float: left;
padding:10px;
}
<!--Style the images inside the grid-->
.col-lg-3 img {
opacity: 0.8;
cursor: pointer;
}
.col-lg-3 img:hover {
opacity: 1;
}
/*Clear floatsd after the columns */
.row:after {
content: "";
display:table;
clear:both;
}
<!--The expanding image container (positioning is needed to position the close button and the text -->
.mycontainer {
position:relative;
display:none;
}
#imgtext {
position:absolute;
bottom:60px;
left:60px;
color:white;
font-size:20px;
}
#expandedImg {
display:block;
padding-left:50%;
}
/* Closable button inside the image */
.closebtn {
position: absolute;
top: 250px;
right: 250px;
color: hotpink;
font-size: 35px;
cursor: pointer;
}
</style>
</head>
<body>
<!--The grid of four equal columsn-->
<div class="container">
<h1 style="text-align:center">Image Gallery</h1>
<hr>
<br>
<div class="row">
<div class="col-lg-3">
<img src="images/cherrySquare.jpg" id="column1" alt="Chinese Characters" onClick="myFunction(this);" >
</div>
<div class="col-lg-3">
<img src="images/beachSquare.jpg" id="column4" alt="Chinese Characters" onClick="myFunction(this);" >
</div>
<div class="col-lg-3">
<img src="images/bonsai4.jpg" id="column3" alt="Chinese Characters" onClick="myFunction(this);" >
</div>
<div class="col-lg-3">
<img src="images/awesomebonsaiSquare.jpg" id="column2" alt="Chinese Characters" onClick="myFunction(this);" >
</div>
</div>
<!--End of the row-->
<div class="mycontainer">
<!--close the image-->
<span class="closebtn" onClick="this.parentElement.style.display='none'" style="color:hotpink;padding-left:50%;padding-top:35%;margin-top:25%;padding-bottom:45%;">×</span>
<!--Expanded image-->
<img id="expandedImg" style="width:55%;height:55%;margin-left:25%;" >
<!--Image text-->
<div id="imgtext"></div>
</div>
</div>
</body>
</html>
1 个解决方案
解决方案1
1 已采纳 2021-05-10 19:18:01
I took a look at your CSS.我看了你的 CSS。 I copied your code and I noticed you wrote your CSS comments with HTML syntax and it's messing with your code change those and and it should work.我复制了你的代码，我注意到你用 HTML 语法写了你的 CSS 注释，它弄乱了你的代码，改变了这些，它应该可以工作。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.