列表中的浮动元素

Question

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

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

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

我试图float: right到按钮，但然后列表元素不显示在按钮下。

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

Answer 1

添加clear: left;（或clear: both;）到按钮 - 这保持它下面的其他元素。

Answer 2

.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; 
 
    } 
 
}

<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>

Answer 3

如果你不介意使用JavaScript来翻到最后li成一个按钮（而不是使用button元），就可以实现正是你想要使用CSS Flexbox的模块是什么。

一旦声明display:flex在ul您可以指定不同的li的order层次，让您重新定位li.button（这是在标记的最后li）作为第三li。

.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; 
 
} 
 

 
}

<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>

注：正如上面的代码片段所述，@media查询仅仅是一个例子，所以你可以看到CSS的行动。如果你想要一个基于设备宽度的@media查询，你需要更类似的东西：

@media only screen and (min-device-width:320px) and (max-device-width:480px), 
only screen and (min-device-width:320px) and (max-device-width:568px), 
only screen and (min-device-width:360px) and (max-device-width:598px) {