плавающий элемент внутри списка

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

Если вы не возражаете против использования JavaScript, чтобы превратить последнюю li в кнопку (а не с помощью button элемента), вы можете достичь именно то, что вы хотите с помощью модуля CSS Flexbox ,

После того, как вы объявили display:flex на ul можно указать order иерархии различных li, что позволяет повторно позиция 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) {