Question

我很难找到将元素浮动到div右下角的解决方案。

它是动态对齐的（div和按钮）。我需要文本能够环绕按钮，并且按钮可以粘贴到div的右下角。

我正在寻找任何东西，无论是纯CSS还是混合了一些Javascript来获得此功能。

基本上：

<div class='container'> <p class='text-left'>Dynamic text area</p> <a class='btn'>Click Here!</a> </div>

我需要.btn（也是动态的，可能是一到三行文本，宽度设置为110px）浮动到右边并坐在底部，文本环绕按钮（它将绝对/固定定位抛到了窗外）。

这已被标记为重复，但在该问题中没有特别解决此问题的答案，因为它们都假设固定的高度。

Answer 1

你必须创建一个浮动元素，以便＆＃34;推送＆＃34;孩子元素下来。然后使用Javascript计算推动元素的高度。请注意，必须在文本之前声明推送器和子容器，因此它们将被呈现为＆＃34;第一个字符＆＃34;容器。

＆＃13;

var parents = document.getElementsByClassName("parent");
for (var i = 0; i < parents.length; i++) {
  var parent = parents[i];
  var child = parent.getElementsByClassName("child")[0];
  var filler = parent.getElementsByClassName("filler")[0];
  var parenth = parent.offsetHeight;
  var childh = child.offsetHeight;
  filler.style.height = (parenth-childh) + "px";
}

＆＃13;

.parent {
  background-color: grey;
}
.child {
  float: right;
  clear: right;
  background-color: green;
}
.filler {
  width: 0px;
  float: right;
}

＆＃13;

<div class="parent">
  <div class="filler"></div>
  <div class="child">thingy thingythingy<br><br>thingy thingy thingy<br>thingy thingy thingy</div>
  asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd
</div>

＆＃13;

Answer 2

在没有看到现有代码的情况下，这是一个猜测，因为我根本不确定任何参数。

.classNameHere{
float: right;
botom: 0;
position: absolute;
}

这将是您要添加的CSS然后将类名应用于您的元素。

Answer 3

这里你去了

＆＃13;

  #foo {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 100px;
    height: 100px;
    background-color: green;
  }
#btnDiv{
    position: fixed;
    bottom: 0;
    right: 0;
  }

＆＃13;

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
</head>
<body>
  <div id="foo">
      <button id="btnDiv">button</button>
  </div>
</body>
</html>

＆＃13;

将Div浮动到div的右下角

3 个答案: