Question

我已经阅读了很多有关此事的帖子，但似乎无法找到解决方案。你能帮我吗？我需要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; }

Answer 1

p是块元素所以你的<div> 7会在它之下; 更改标记如下...

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

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

link

div的位置在另一个里面

1 个答案: