CSS集装箱定位

我在与CSS一个小麻烦CSS集装箱定位

我在JSP网页中的容器，它的风格与股利和完美的作品，直到我把另一个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>

在这个任何想法？

谢谢

来源

2013-04-21 d199224

你可能会张贴html/example html吗？ – timss 2013-04-21 00:11:30

是的。一个jsfiddle会帮助我们帮你 – 2013-04-21 00:11:54

为你们添加html – d199224 2013-04-21 00:26:58

我做了一个测试，似乎工作。问题是你可能需要添加一个高度，否则容器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>

让我知道这是否有帮助。

来源

2013-04-21 00:23:48

太棒了，完美无瑕！谢谢....有没有办法动态地设置它的任何机会？ – d199224 2013-04-21 00:28:13

你想要动态改变什么？请尽可能具体。你想使用代码更改CSS吗？ – 2013-04-21 05:11:23

对不起，延迟回复。我正在做的是显示来自数据库的结果，并根据查询显示不同数量的结果，所以我想改变容器的大小以适应它们。 – d199224 2013-04-23 14:17:39

这是在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>

来源

2013-04-24 00:23:07

谢谢肖恩，这有助于很多 – d199224 2013-04-24 22:09:13

欢迎您。让我知道，如果你有任何其他关于CSS的具体问题，我可以帮忙。您也可以将所有这些div放在另一个旁边，或者使用样式float：left;或浮动：正确;然后使用div

清除命令div来自浮动元素后面，以阻止任何较低的项目在页面上向上移动，作为一个简单的答案。 – 2013-04-25 15:01:28

CSS集装箱定位

回答

相关问题