列表中的浮动元素

Question

我有一个项目列表（使用ajax调用动态加载）。

在手机上，我想在页面底部添加一个按钮（图像中的绿色元素），这不是问题。

在桌面上我希望这个绿色按钮浮动到页面右侧，在项目列表旁边。

我尝试了float: right按钮，但列表元素没有显示在按钮下面。

我该怎么做（使用bootstrap 3）？

Answer 1

将clear: left;（或clear: both;）添加到按钮 - 这使其保持在其他元素下方。

Answer 2

＆＃13;

＆＃13;

.box{
border: 1px solid blue;
height: 50px;
float: left;
  order: 0;
margin: 0 5px 5px 0;
width: 100px;
}
.red{
  border: 1px solid red;
  float: right;
}
@media (max-width: 500px){
  
  .wrap{
display: flex;
flex-wrap: wrap;
  }
  .box{
width: 100%;
  }
  .red{
order: 1;
  }
}

＆＃13;

<div class="wrap">
  <div class="box red">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box">6</div>
  <div class="box">7</div>
  <div class="box">8</div>
  <div class="box">9</div>
  <div class="box">10</div>
  <div class="box">11</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

如果您不介意使用javascript将最后一个li转换为按钮（而不是使用button元素），那么您可以使用CSS flexbox模块实现您想要的效果

在display:flex上声明ul后，您可以指定各种order的{​​{1}}层次结构，以便重新定位li（这是第三个li.button中标记中的最终li。

＆＃13;

＆＃13;

li

＆＃13;

.container {
padding: 6px;
border:3px solid rgb(116,150,255);
max-width: 408px;
}

ul {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
margin: 0;
padding: 0;
list-style-type: none;
}

li {
flex: 1 0 120px;
height: 40px;
margin: 6px;
padding-top: 20px;
color: rgb(0,74,166);
background-color: rgb(116,150,255);
line-height: 20px;
text-align: center;
font-weight: bold;
}

li:nth-of-type(n+3) {
order: 2;
flex: 1 0 90px;
}

li:nth-of-type(n).button {
order: 1;
}

.button {
color: rgb(0,166,74);
background-color: rgb(0,253,66);
}

.container, li {
box-shadow: 3px 3px 6px rgb(0,0,0);
}

@media only screen and (max-width: 600px) { /* Example Media Query */

.container {
margin: 0 auto;
width: 300px;
}

li:nth-of-type(n) {
flex: 1 0 288px;
order: 0;
}

}

＆＃13;

＆＃13;

＆＃13;

N.B。如上面的代码段中所述，<h2>Open this example to full page and<br />increase / decrease viewport width</h2> <div class="container"> <ul> <li>Item on List</li> <li>Item on List</li> <li>Item on List</li> <li>Item on List</li> <li>Item on List</li> <li>Item on List</li> <li class="button">Button</li> </ul> </div>查询只是一个示例，因此您可以看到CSS正在运行。如果您想要基于设备宽度的@media查询，则需要更多类似的内容：

@media