关于#css#的问题，请各位专家解答！

flex布局，怎么把侧边栏，主体和右侧图片横向对齐，把右边的图片放到浏览器最右侧，感谢

img

<!DOCTYPE html>
<html>
  <head>
    <link href="css/styles.css" rel="stylesheet">
  </head>
  <body>
    <div class="top">头部</div>
    <div class="by">
    <div class="nav">侧边栏</div>
    <div class="bd">主体</div>
    <div class="rt">
      <div>右侧图片1</div>
      <div>右侧图片2</div>
      <div>右侧图片3</div>
      <div>右侧图片4</div>
    </div>
    </div>
    <div class="bm">脚部</div>
  </body>
</html>        


*{
  margin:0px;
  padding:0px;
}
.top{
  height:60px;
  width:100%;
  background-color:black;
  color:white;
  font-size:40px;
  text-align: center;
  padding:10px;
}
.nav{
  height:1200px;
  width:100px;
  display:inline-block;
  line-height: 30px;
  background-color: #eeeeee;
  padding:10px;
}
.bd{
  display:inline-block;
  width:600px;
  padding:10px;
}

.rt{
 display:inline-block;
}
.rt div{
  display:block;
  width:100px;
  height:100px;
  background-color:red;
  margin:0px 0px 10px 0px;
}
.bm{
  height:60px;
  width:100%;
  background-color:black;
  color:white;
  text-align:center;
  padding:10px;
}

加上这个就可以了

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <div class="top">头部</div>
    <div class="by">
    <div class="left">
    <div class="nav">侧边栏</div>
    <div class="bd">主体</div>
    </div>
    <div class="rt">
      <div>右侧图片1</div>
      <div>右侧图片2</div>
      <div>右侧图片3</div>
      <div>右侧图片4</div>
    </div>
    </div>
    <div class="bm">脚部</div>
  </body>
</html>        
 <style>
 *{
  margin:0px;
  padding:0px;
}
.top{
  height:60px;
  width:100%;
  background-color:black;
  color:white;
  font-size:40px;
  text-align: center;
  padding:10px;
}
.nav{
  height:1200px;
  width:100px;
  display:inline-block;
  line-height: 30px;
  background-color: #eeeeee;
  padding:10px;
}
.bd{
  display:inline-block;
  width:600px;
  padding:10px;
}
 
.rt{
 display:inline-block;
}
.rt div{
  display:block;
  width:100px;
  height:100px;
  background-color:red;
  margin:0px 0px 10px 0px;
}
.bm{
  height:60px;
  width:100%;
  background-color:black;
  color:white;
  text-align:center;
  padding:10px;
}
 .by{
     display:flex;
     justify-content: space-between;
 }
 </style>

这样的效果吗？

img

<!DOCTYPE html>
<html>

<head>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        .top {
            height: 60px;
            width: 100%;
            background-color: black;
            color: white;
            font-size: 40px;
            text-align: center;
            padding: 10px;
            
            box-sizing: border-box;
        }

        .nav {
            height: 1200px;
            width: 100px;
            display: inline-block;
            line-height: 30px;
            background-color: #eeeeee;
            padding: 10px;
        }

        .by {
            display: flex;
        }

        .bd {
            display: inline-block;
            flex: 1;
            width: 600px;
            padding: 10px;
        }

        .rt {
            display: inline-block;

        }

        .rt div {
            display: block;
            width: 100px;
            height: 100px;
            background-color: red;
            margin: 0px 0px 10px 0px;
        }

        .bm {
            height: 60px;
            width: 100%;
            background-color: black;
            color: white;
            text-align: center;
            padding: 10px;
            box-sizing: border-box;
        }
    </style>
</head>

<body>
    <div class="top">头部</div>
    <div class="by">
        <div class="nav">侧边栏</div>
        <div class="bd">主体</div>
        <div class="rt">
            <div>右侧图片1</div>
            <div>右侧图片2</div>
            <div>右侧图片3</div>
            <div>右侧图片4</div>
        </div>
    </div>
    <div class="bm">脚部</div>
</body>

</html>