Question

我需要在父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>

还有一些组合，但没有什么对我有用，有人请在此提出建议。

感谢。

Answer 1

您是否尝试使用display：inline-block？

<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>

Answer 2

尝试添加div，然后使用一些width / float: left和其他css进入正确的布局。

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 3

您的代码存在一些问题。

div需要宽度和高度
如果你使用flex属性，你应该知道它是如何在幕后工作的
为什么不使用相对于父级的位置和顶部/右侧的值来使你的标记形状？

我希望这些tipps会帮助你。如果不考虑更准确地问。

最好的问候保罗

Answer 4

<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>

Answer 5

<强> 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.

内部div元素位置

5 个答案: