我如何对齐不同大小的div而不浮

Question

我试图使页面，水平下方菜单的div需要是如下：

Div1的一个蓝色背景

Div2的所述一个红色背景（用它里面黄色背景元素）

DIV3是具有绿色背景

我需要DIV 1为左上，DIV 2是在右边，和DIV 3是在左下方，所以他们出现这种方式：https://imgur.com/a/bp45n

HTML

<div class="top"> 
    <div class="left"> 
     Left 
    </div> 
    <div class="right"> 
     Right 
    </div> 
</div> 
<div class="navigation"> 

    <div class="menu"> 
    <input type="button" value="Option 1" /> 
     <div class="submenu"> 
     <a href="#">Link 1</a> 
     <a href="#">Link 2</a> 
     <a href="#">Link 3</a> 
     </div> 
    </div> 
    <div class="menu"> 
    <input type="button" value="Option 2" /> 
     <div class="submenu"> 
     <a href="#">Link 4</a> 
     <a href="#">Link 5</a> 
     <a href="#">Link 6</a> 
     </div> 
    </div> 
    <div class="menu"> 
    <input type="button" value="Option 3" /> 
     <div class="submenu"> 
     <a href="#">Link 7</a> 
     <a href="#">Link 8</a> 
     <a href="#">Link 9</a> 
     </div> 
    </div> 
    <div class="menu"> 
    <input type="button" value="Option 4" /> 
     <div class="submenu"> 
     <a href="#">Link 10</a> 
     <a href="#">Link 11</a> 
     <a href="#">Link 12</a> 
     </div> 
    </div> 
    <div class="menu"> 
     <input type="button" value="Option 5" /> 
     <div class="submenu"> 
      <a href="#">Link 13</a> 
      <a href="#">Link 14</a> 
      <a href="#">Link 15</a> 
     </div> 
    </div> 
</div> 
<div class="topleft"> 
    Korisni linkovi: 
    <ul> 
     <li><a href="#">Home</a></li> 
     <li><a href="#">Settings</a></li> 
     <li><a href="#">Users</a></li> 
     <li><a href="#">Orders</a></li> 
    </ul> 
</div> 



<div class="contentright"> 
News 
    <div class="news"> 
    <pre>Neki tekst za neke novine, 
    detaljnije na linku ispod 
    </pre> 
    <a href="#">Detaljnije</a> 
    </div> 
    <div class="news"> 
    <pre>Neki tekst za neke novine, 
    detaljnije na linku ispod 
    </pre> 
    <a href="#">Detaljnije</a> 
    </div> 
    <div class="news"> 
    <pre>Neki tekst za neke novine, 
    detaljnije na linku ispod 
    </pre> 
    <a href="#">Detaljnije</a> 
    </div> 
    <div class="news"> 
    <pre>Neki tekst za neke novine, 
    detaljnije na linku ispod 
    </pre> 
    <a href="#">Detaljnije</a> 
    </div> 
    <div class="news"> 
    <pre>Neki tekst za neke novine, 
    detaljnije na linku ispod 
    </pre> 
    <a href="#">Detaljnije</a> 
    </div> 
    <div class="news"> 
    <pre>Neki tekst za neke novine, 
    detaljnije na linku ispod 
    </pre> 
    <a href="#">Detaljnije</a> 
    </div> 
</div> 
<div class="bottomleft"> 
<pre> 
Bio jednom jedan zeka 
Bio jednom jedan zeka 
Bio jednom jedan zeka 
Bio jednom jedan zeka 
Bio jednom jedan zeka 
Bio jednom jedan zeka 
</pre> 
</div> 
</body> 

CSS

body 
{ 
    /*background-image:url("background.jpg");*/ 
} 
.top 
{ 
    margin-top:5%; 
    color:white; 
    font-size:20px; 
    white-space:nowrap; 
    width: 80%; 
    text-align: center; 
    padding-bottom:5%; 
} 
.top .left 
{ 
    display:inline-block; 
    width: 40%; 
} 
.top .right 
{ 
    display:inline-block; 
    text-align:right; 
    width: 40%; 
} 
.navigation 
{ 
    display:inline; 
    margin-left:10%; 
    margin-right:10%; 
    text-align:center; 
    font-size:0; 
} 
.menu 
{ 
    display:inline-block; 
    position:relative; 
    font-size:15px; 
    border:5px solid black; 
} 
.menu input 
{ 
    height:50px; 
    width:200px; 
    background-color:black; 
    color: white; 
    letter-spacing:1px; 
    border: 1px solid black; 
} 
.menu:first-child 
{ 
    border-top-left-radius:20px; 
} 
.menu:last-child 

{ 
    border-top-right-radius:20px; 
} 

.menu:hover 

{ 
    border-color:gray; 
} 

.menu input:hover 

{ 
    background-color:gray; 
    color:black; 
    border-color:gray; 
} 

.menu:hover .submenu 
{ 
    display:block; 
} 

.submenu 
{ 
    display:none; 
    position:absolute; 
    text-align:center; 
    background-color:gray; 
    width:100%; 
} 
.submenu a 
{ 
    display:block; 
    color:black; 
    text-decoration:none; 
    text-align:center; 
    padding-bottom:6px; 
    padding-top:6px; 
    border:1px solid black; 
    width:100%; 
} 
.submenu a:hover 
{ 
    background-color:black; 
    color:white; 
} 

.submenu a:first-child 
{ 
    border-top:none; 
} 

.topleft 
{ 
    display: inline-block; 
    position:relative; 
    margin-left:10%; 
    margin-top:2%; 
    box-shadow:2px 5px 10px black; 
    color:white; 
    font-size:20px; 
    font-family:verdana; 
    background-color:blue; 
} 
.topleft ul 
{ 
     display:inline; 
     list-style-type:none; 
     margin:inherit; 
} 
.topleft li 
{ 
    padding:15px; 
    margin:inherit; 
} 
.topleft li a 
{ 
    color:white; 
    text-decoration:none; 
} 
.topleft li a:hover 
{ 
    background-color:gray; 
} 
.contentright 
{ 
    display:inline-block; 
    background-color:red; 
    margin-left:10%; 
    position:relative; 
    border:1px solid black; 
} 
.news 
{ 
    background-color:yellow; 
    display:inline-block; 
    border:1px solid black; 
} 
.bottomleft 
{ 
    background-color:green; 
    display: block; 
    margin-left:10%; 
    box-shadow:2px 5px 10px black; 
    width:155px; 
} 

这里的链接的jsfiddle

https://jsfiddle.net/Le6y0wx8/

请请记住，我不允许使用浮动属性。

Answer 1

这里是fiddle检查

如果使用Flexbox的设计则是不需要浮法

.container{ 
    display:flex; 
}