如何组织嵌套在对方内的div？

Question

这是我想达到的布局，但我在使用Main Body和Side Box麻烦。我遇到的问题是Main Body完全在Side Box之下，而不是它应该如何在上面的图像（类型包装Side Box）。

有人能够在使用CSS布局技术方面带领我走向正确的方向吗？

到目前为止，这是我做了什么

HTML

<div class="main"> 
    <div class="header"> 
     <h2>Header</h2> 
    </div> 
    <div class="sidebox"> 
     <h2>Side box</h2> 
    </div> 
    <div class="body"> 
     <p>Body</p> 
    </div> 
</div> 

CSS

div.main { 
    width: 40%; 
} 

div.header { 
    width: 100%; 
    position: absolute; 
} 

div.sidebox { 
    float: right; 
    width: 30%; 
    height: 50%; 
} 

div.body { 
    float: left; 
} 

Answer 1

您可以尝试浮动该边箱元素的权利。

这里的关键是.sidebox元素出现在源代码中的.main元素之前。

.title { 
 
    background-color: yellow; 
 
} 
 
.sidebox { 
 
    width: 25%; 
 
    background-color: gray; 
 
    float: right; 
 
}

<h1 class="title">The title goes here</h1> 
 
<div class="sidebox">The side box text. Donec adipiscing, lorem non euismod venenatis, diam orci tincidunt magna, ut interdum magna arcu vel elit. </div> 
 
<div class="main"> 
 
<p>Donec adipiscing, lorem non euismod venenatis, diam orci tincidunt magna, ut interdum magna arcu vel elit. Nunc molestie lacus non urna eleifend mattis. Praesent ipsum nulla, tempor malesuada lacinia quis, elementum et tellus.</p> 
 
<p>Donec adipiscing, lorem non euismod venenatis, diam orci tincidunt magna, ut interdum magna arcu vel elit. Nunc molestie lacus non urna eleifend mattis. Praesent ipsum nulla, tempor malesuada lacinia quis, elementum et tellus.</p> 
 
<p>Donec adipiscing, lorem non euismod venenatis, diam orci tincidunt magna, ut interdum magna arcu vel elit. Nunc molestie lacus non urna eleifend mattis. Praesent ipsum nulla, tempor malesuada lacinia quis, elementum et tellus.</p> 
 
</div>

Answer 2

广场#sidebox内#main然后应用float: right

div { padding: 1em; } 
 

 
#header { border:2px solid red; } 
 

 
#main { border: 2px solid lightblue; overflow: auto; } 
 

 
#side { float: right; border:2px solid orange; }

<div id="header">Header</div> 
 
<div id="main"> 
 
    <div id="side">Side Box</div> 
 
    Main body 
 
</div>

的jsfiddle：https://jsfiddle.net/azizn/8kjjh2u6/