リストの中に浮動小数点があります

Question

私は項目のリストを持っています（ajax呼び出しで動的に読み込みます）。

携帯では、ページの下部に問題のないボタン（画像の緑色の要素）を追加します。

デスクトップ上この緑色のボタンをページの右側、アイテムリストの横に浮かべてください。

私はボタンにfloat: rightを試しましたが、リストの要素がボタンの下に表示されません。

（ブートストラップ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

あなたが（むしろbutton要素を使用するよりも）ボタンに最後liを回すためにはJavaScriptを使用して気にしない場合は、CSSのフレキシボックスモジュールを使用して正確に何をしたい達成することができます。

あなたはあなたが第liとして（マークアップの最後のliある）li.button位置を再できるように、様々なliのorder階層を指定することができulにdisplay:flexを宣言した後。

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

N.B.@mediaの上のスニペットに記載されているように、クエリは実際の例であり、実際のCSSを見ることができます。

@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) {