时间戳

首页 > 解决方案 > 如何将一个元素放置在左右浮动的 2 个元素的底部？

html - 如何将一个元素放置在左右浮动的 2 个元素的底部？

问题描述

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<button type="button" style="width: 40%; float: left; height: 40px">Top!</button>
<button type="button" style="width: 40%; float: right; height: 40px">Top!</button>
<button type="button" style="float: left">Botton!</button>

</body>
</html>

在此处输入图像描述

在此处输入图像描述

在上面的代码中，如果窗口太窄以至于两个顶部按钮之间的空间不足以容纳第三个按钮，则第三个按钮只会被放置在新行中。

如何更改代码以使第三个按钮始终位于新行中，而不管窗口宽度如何？

标签： htmlcss

解决方案

只需添加

clear:both:
float:left;

到底部按钮

<button type="button" style="clear: both;float: left;">Botton!</button>

推荐阅读