Question

我对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>

有关于此的任何想法吗？

由于

Answer 1

我做了一个测试，似乎正在工作。问题是您可能需要添加高度，否则容器div将折叠。想象相对像固定，它没有高度，所以它被“冰”到位。它与使用相对和绝对有关。

这里有进一步教育的链接，可能有助于进一步解释。 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>

如果这有帮助，请告诉我。

Answer 2

这里使用CSS中的盒子模型概念。这可以进一步扩展。由于一些原因，我不是w3schools的忠实粉丝，但这里有一个链接可以进一步解释。 http://www.w3schools.com/css/css_boxmodel.asp

我希望这会有所帮助。你需要从我能说的内容深入挖掘CSS。

<!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 
{
width:1000px;
margin:0 auto 0 auto;
padding:5px 30px 5px 30px;
background:#ffffff; 
height:100%;
border:green 1px solid;
}

div.ex1
{
margin:0 0 0 0;
padding:10px 5px 10px 5px;
width:150px;
border:1px solid gray;
}
#outterWrapper{
    border:solid red 1px;
    padding:20px;
    }
</style>
</head>
<div id="outterWrapper">
  <div class="container">
    <div class="ex1"> This is the inside div</div>
    <!-- ADDING 10PX BETWEEN THE DIV'S USING CSS -->
    <div class="ex1"> This is the inside div</div>
    <div class="ex1"> This is the inside div</div>
    <div class="ex1"> This is the inside div</div>
    <div class="ex1"> This is the inside div</div>
  </div><!-- END CONTAINER -->
</div><!-- END OUTTER WRAPPER -->
<body>
</body>
</html>

CSS容器定位

2 个答案: