如何在没有浮动的情况下对齐不同大小的 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/

请记住，我不能使用 float 属性。

Answer 1

这里是fiddle检查一下

如果使用弹性盒设计，则不需要浮动

.container{
  display:flex;
}