позиция div внутри другого

Я много читал о сообщениях об этом, но просто не могу найти решение. Не могли бы вы мне помочь? Мне нужно, чтобы DIV7 внутри DIV3 был (плавающим?) Слева и сверху DIV3, и я хочу, чтобы он был шириной 20% и соответствовал (наследовать?) Высоту DIV3.позиция div внутри другого

Кроме того, почему существует небольшой промежуток между 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; }

источник

2014-12-11 finjay

p является блочный элемент так ваш <div> 7 происходит под ним; изменение разметки следующим образом ...

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

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

link

источник

2014-12-11 11:06:52 Rasel

Это решает только половину от моей проблемы. Div3 предположительно будет такой же высоты, как Div3, и теперь, если я добавлю контент в Div7, он понизит содержимое Div3. Итак, еще не совсем, но спасибо. – finjay

Практически там. Необходимо установить абсолютное положение позиции Div3 и Div7. Теперь мне просто нужно выяснить, как установить высоту Div7, чтобы следовать за Div3 и наоборот. если содержание другого увеличивается более чем на 75% высоты (минимальная высота), оба диапазона Div. – finjay

div7 может быть такой же высоты, если вы используете высоту: 100%; и удалите

DIV

, потому что p также занимает некоторую высоту – Rasel

позиция div внутри другого

ответ

Смежные вопросы