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集裝箱定位

回答

相關問題