html - div在另一个内部的位置

我已经读了很多关于此的文章，但是似乎找不到解决方案。你能帮我吗？我需要DIV3内部的DIV7在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是块元素
所以你的<div> 7在它下面；
更改标记，如下所示...

<div id="Div3">
   <div id="Div7">
         <p>DIV7</p>
    </div>
    <p>DIV3</p>

 </div><!--Closing Div3-->

link

关于html - div在另一个内部的位置，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/27421112/

div3

html - div在另一个内部的位置