Question

我有一个包含文字的div

<div>
    FC
</div>

例如div为100px宽，200px高有没有办法让文本位于div的底部

_____________
|           |
|           |
|           |
|           |
|           |
|           |
|__FC_______|

我想要的共鸣是因为我在网站上有一个栏我正在努力提高我的CSS，栏位于该栏内的页面顶部那里有一个带浮动的1img左边和右边的2divs，右边的2左边是fc的左边

________________________________________________________________________
|                                                                      |
| logoimg                                               div2(fc)  div1 |
|______________________________________________________________________|

我希望FC坐在div的底部，栏没有固定，我使用了最小高度的百分比，所以我不能给它一个边缘顶部或者我可以给它一个百分比然而我希望fc始终位于放置位置的确切底部。

Answer 1

将文本换行并将RewriteEngine on RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . index.php [L]设置为0，这是指元素在其位置的y位置。它将粘贴到父div的底部。请注意，父div必须为bottom且孩子必须为relative才能生效。

absolute

.parentdiv
{
  border: 1px solid black;
  width: 50px;
  height: 90px;
  position: relative;
}
.child{
  bottom: 0; position: absolute;
}

Answer 2

你需要将它放在元素中。您可以在父级上使用position: relative，并在元素上提供position: absolute和bottom: 0。例如：

＆＃13;

.parent {position: relative; border: 1px solid #999; height: 200px;}
.parent .elem {position: absolute; bottom: 0; left: 35%; width: 30%; border: 1px solid #99f;}

＆＃13;

<div class="parent">
  <div class="elem">FC</div>
</div>

＆＃13;

Answer 3

您可以使用 flexbox

执行此类操作

<强> DEMO

nav {
  display: flex;
  flex-direction: row;
  background: white;
  padding: 25px 0;
}

.left {
  flex: 1;
}

.right {
  margin-left: auto;
}

a {
  padding: 0 25px;
  text-decoration: none;
  color: black;
}

@media(max-width: 480px) {
  nav {
    flex-direction: column;
  }

  .right {
    display: flex;
    flex-direction: column;
    margin-left: 0;
  }

  .fc {
    order: 2;
  }  
}

<nav>
  <div class="left">
    <a href="">Left</a>
  </div>

  <div class="right">
     <a class="fc" href="">FC Right 1</a>
     <a href="">Right 2</a>
  </div>
</nav>

Answer 4

看看这个：

https://jsfiddle.net/pajxLngr/

HTML：

Code Article    PrixRevientHT   PrixRevientTTC  Date debut  Date fin
-------------------------------------------------------------------------
768180101   1,344   1,34    25/10/2015  31/12/2049
783681833   1,593   1,59    10/10/2015  31/12/2049

CSS：

<div class="menuBar">
  <div class="imgLogo">logo</div>
  <div class="last">last</div>
  <div class="textOnBottom"><span>FC</span></div>
</div>

将文本放在元素的底部

4 个答案: