div的意思

Question

有几个问题：

1. 我怎样才能将我的请求div和我的语言Div用红线放在底部，无论上面div的大小如何。

2. 如何让名称和评级div垂直对齐到图片的中间？

这是我的代码，JSFiddle（https://jsfiddle.net/samuvk/jejjzjjq/1/）和结果



这是我想要的结果：



我真的很感激任何帮助。

    #menucontainer {
        border: 1px red solid;
        overflow: auto;
    }
    .middledividermenu {
        width: 39%;
        float: left;
        border: 1px green solid;
        overflow: auto;
    }
    .pictureleft {
        padding: 0.5em 0.5em 0.5em 0.5em;
        width: 19%;
        float: left;
        border: 1px green solid;
        overflow: auto;
    }
    .rightdivider {

    width: 40%;
        float: left;
        border: 1px green solid;
        overflow: auto;
    }
    .namemiddledivider {
      width: 70%;
      float: left;
      border: 1px blue solid;
      font-family: 'Roboto', sans-serif;
      font-weight: 900;
      font-size: 1.8em;
    }
    .description {
      width: 99%;       
      float: left;
      border: 1px blue solid;
      font-family: 'Roboto', sans-serif;
      font-size: 0.9em;
      color:grey;
    }

    .request {
      width: 99%;
      float: left;
      border: 1px blue solid;
      text-align: center; 
     }


.littlepicture {
      width: 15%;
      float: left;
      border: 1px blue solid;
}

.languagecallout {
      padding: 0em 0.5em 0em 0.5em;
      width: 10%;
      float: left;
      border: 1px blue solid;
}

.name {
width: 20%;
float: left;
border:1px solid blue;
vertical-align: middle;
}

.rating {
width: 57%;
float: left;
border:1px solid blue;
height:50%;
}

.personrating {
width: 99%;
float: left;
border:1px solid yellow;
vertical-align: middle;
}

.languages {
width: 99%;
float: left;
border:1px solid blue;
}

Answer 1

我编辑了你的小提琴https://jsfiddle.net/jejjzjjq/5/

使用position:relative和position:absolute

即使你的结构有点混乱，我没有花时间改变它，我只添加了一些东西。你真的需要完全检查你的代码！

Answer 2

这有帮助吗？它显示了容器中顶部div和底部div之间的空格的效果。

其他说明：我认为内容的常规流程从上到下，如果您想在底部放置特定内容或将其从常规流程中取出，您可以使用绝对位置。 / p>

在我的代码中用来获取高度，以便它可以很好地适应窗口/视图端口。你可以将高度设置为像素或其他任何东西。

*{
  box-sizing:border-box;
}
.container{
  height: 100vh;
  border-bottom: 3px red solid;
  position: relative;
}
.name, .rating, .language, .request{
  width: 45%;
  border:1px solid blue;
  height: 20vh;
}
.name, .request{
  float: left;
}
.rating, .language{
  float: right;
}
.bottom{
  position: absolute;
  bottom: 0;
  width: 100%;
}

<div class="container">
  <div class="name">Name</div>
  <div class="rating">Rating</div>
  <div class="bottom">
    <div class="request">Request</div>
    <div class="language">Language</div>
  </div>

</div>