我已经阅读了很多关于此的帖子，但似乎无法找到解决方案。你能帮我吗？我需要 DIV3 内部的 DIV7( float ？)在 DIV3 的左侧和顶部，我希望它的宽度为 20% 并跟随(继承？)DIV3 的高度。
还有，为什么DIV3和DIV8之间有一个小差距？？？
(x)html:
<?xml version='1.0' encoding='UTF-8' ?>
<!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"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:c="http://xmlns.jcp.org/jsp/jstl/core">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<h:outputStylesheet name="./css/css.css"/>
</h:head>
<h:body>
<div id="Div1">
<div id="Div2">
<div id="Div4">DIV4</div>
<div id="Div5">DIV5</div>
<div id="Div6">DIV6</div>
</div><!--Closing Div2-->
<div id="Div3"><p>DIV3</p>
<div id="Div7"><p>DIV7</p></div>
</div><!--Closing Div3-->
<div id="Div8"><p>DIV8</p></div>
</div><!--Closing Div1-->
</h:body>
</html>
CSS:
html, body, #Div1 {
width:100%;
margin:0 auto;
float:left;
background-color: pink;
min-height: 100%;
height: 100%; }
#Div2 {
width:100%;
float:left;
background-color: lightgray;
height: 15%; }
#Div3 {
width:100%;
clear:both;
background-color: lightblue;
min-height: 75%;
text-align: center; }
#Div4, #Div6 {
float:left;
width:20%; }
#Div5 {
float:left;
width:60%; }
#Div7 {
width:20%;
background-color: red; }
#Div8 {
width: 100%;
height: 10%;
text-align: center;
background-color: gold; }
最佳答案
p是 block 元素
所以你的<div> 7 在它下面；
更改标记如下...
<div id="Div3">
<div id="Div7">
<p>DIV7</p>
</div>
<p>DIV3</p>
</div><!--Closing Div3-->
关于html - div 在另一个里面的位置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27421112/