我在使用 css 时遇到了一些麻烦
我的 jsp 网页中有一个容器，该容器使用 div 设置样式并完美运行，直到我放入另一个 div 标记来设置某些元素的样式，然后由于某种原因这些元素被放置在容器之外。
这是 CSS 代码:
.container
{
position: relative;
width:1000px;
margin:0 auto 0 auto;
padding:5px;
border:1px solid #cccccc;
background:#ffffff;
}
div.ex1
{
position: absolute;
top: 300px;
left: 150px;
width:150px;
padding:5px;
border:1px solid gray;
}
这是jsp代码:
<%@ page import="java.util.*" %>
<%@ page import="DTO.Product" %>
<%@ page import="DAO.ListTabletsDao" %>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO- 8859-1"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="container">
<img src="computer_banner_blue.gif" alt="banner">
<div class="nav">
<ul> <li><a href="home.jsp">Home</a></li><li><a href="tablets.jsp">Tablets</a></li>
<li><a href="laptops.jsp">Laptops</a></li><li><a href="computers.jsp">Computers</a></li>
<li><a href="printers.jsp">Printers</a></li>
<li><a href="contact.jsp">Contact</a></li> <li><a href="about.jsp">About</a> </li> </ul>
</div>
<form action="UserActionServlet" method="post" name="searchForm">
<input type="text" size="20" name="searchProduct">
<input type="hidden" name="action" value="search" />
<input type="submit" value="Search">
</form>
<div class ="tabHeader">
<h1>Tablets</h1>
</div>
<%
ListTabletsDao prod = new ListTabletsDao();
List<Product> prods = prod.getDesc();
request.getSession().setAttribute("Prods", prods);
prods = (List)(request.getSession().getAttribute("Prods"));
int numId;
int y = 0;
if (prods != null){
for (Product p: prods){
numId = p.getProduct_id();
y++;
%>
<div class="ex<%=y%>">
<center>
<%=p.getTitle()%> <br> <img width="100" height="100" src="<%=p.getImageUrl()%>">
<a href="productInfo.jsp?productId=<%=(numId)%>"><button>more info</button></a>
<%=p.getPrice()%>
</center>
</div>
<%
}
}
%>
</body>
<div>
</html>
对此有什么想法吗？
谢谢
最佳答案
我进行了测试，似乎可以正常工作。问题是您可能需要添加高度，否则容器 div 会折叠。将 relative 想象成固定的，它没有高度，所以它被“冰冻”到位。它与使用相对和绝对有关。
这里是进一步教育的链接，可能有助于进一步解释。 http://www.w3.org/wiki/CSS_static_and_relative_positioning
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style>
.container
{
position: relative;
width:1000px;
margin:0 auto 0 auto;
padding:5px;
border:1px solid #cccccc;
background:#ffffff;
height:400px;
}
div.ex1
{
position: absolute;
top: 300px;
left: 150px;
width:150px;
padding:5px;
border:1px solid gray;
}
</style>
</head>
<div class="container">
<div class="ex1"> This is the inside div</div>
</div>
<body>
</body>
</html>
如果这有帮助，请告诉我。
关于html - CSS容器定位，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16126596/