Внутренний DIV элемент позиции

-1

Мне нужно, чтобы отобразить два Div элементов внутри родительского DIV, то, что выглядит как этотВнутренний DIV элемент позиции

Position of div elements

И я пытался что-то для этого, как

<!DOCTYPE html> 
<html> 
<head> 

</head> 
<body> 

<div > 

<div style="background-color:red;display:inline-flex;">inner div 1</div> 

<div style="background-color:yellow;display:inline-flex;">inner div 2 

<div style="background-color:yellow;">innermost div 1</div> 
<div style="background-color:yellow;">innermost div 2 </div> 

</div> 

</div> 

</body> 
</html>

, а также некоторые комбинации, но ничего не работает для меня, кто-нибудь, пожалуйста, предложите это.

Спасибо.

источник

2014-12-11 Bharath

Пробовали ли вы с дисплеем: встроенный блок?

<div style="background-color:green; padding:5px;" > 

    <div style="background-color:red;padding:5px; display:inline-block;">inner div 1</div> 

    <div style="background-color:yellow;padding:5px; display:inline-block;">inner div 2 

     <div style="background-color:blue;padding:5px;">innermost div 1</div> 
     <div style="background-color:brown;padding:5px;">innermost div 2 </div> 

    </div> 

</div>

источник

2014-12-11 12:36:49

есть серьезные проблемы с вашим кодом.

диве необходима шириной и высота
при использовании гибкого свойства вы должны знать, как он работает за кулисами
почему не вы просто использовать позицию по отношению к родителю и верхним/вправо значениям ти принести ваша разметка в форме?

Я надеюсь, что некоторые из этих советов помогут вам. если не считать более точным.

с наилучшими пожеланиями Пол

источник

2014-12-11 12:34:13 Paulquappe

Попробуйте просто добавить дивы и чем использовать некоторые width/float: left и другие CSS, чтобы получить в в правильном макете.

div { 
 
    box-sizing: border-box; 
 
    border: 1px solid black; 
 
    padding: 2px; 
 
} 
 
.wrapper { 
 
    width: 100%; 
 
    height: 160px; 
 
    padding: 15px; 
 
} 
 
.half { 
 
    float: left; 
 
    width: 50%; 
 
    height: 100%; 
 
} 
 
.inner { 
 
    margin: 2px 5px; 
 
    height: 30px; 
 
} 
 
.clear { 
 
    clear: both; 
 
    border: none; 
 
}

<div class="wrapper"> 
 
    Div 
 
    <br/> 
 
    <div class="half"> 
 
    Div 1 
 
    </div> 
 
    <div class="half"> 
 
    Div 2 
 
    <div class="inner"> 
 
     div 1 
 
    </div> 
 
    <div class="inner"> 
 
     div 2 
 
    </div> 
 
    </div> 
 
    <div class="clear"></div> 
 
</div>

источник

2014-12-11 12:37:27 Justinas

<div style="width:170px"> 

<div style="background-color:red;float:left">inner div 1</div> 

<div style="background-color:yellow;float:right; height:200px;padding-bottom:15px;">inner div 2 

<div style="background-color:yellow;height:100px">innermost div 1</div> 
<div style="background-color:yellow;">innermost div 2 </div> 


</div> 
</div>

источник

2014-12-11 12:44:58 RamRajVasavi

HTML:

<div class="parent"> 
    <div class="child">child</div> 
    <div class="child"> 
     <div>child</div> 
     <div class="parent"> 
      <div class="child">child</div> 
      <div class="child">child</div> 
     </div> 
    </div> 
</div>

CSS:

.parent{ 
    display:flex; 
    align-items:stretch; 
    flex-flow:row wrap; 
} 
.column{ 
    flex-direction:column; 
} 
.child{ 
    flex:1 0; 
    margin:10px; 
    padding:5px; 
}

See DEMO.

источник

2014-12-11 13:08:29 Hiral

Внутренний DIV элемент позиции

ответ

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