Я хочу сделать две вещи:
- Исправить положение нескольких элементов управления, когда оно появляется, чтобы при изменении ширины браузера пользовательское положение элементов управления оставалось неизменным. а все остальное сверху и снизу можно оборачивать нормально. Это позволяет пользователю манипулировать элементами управления, не теряя своей позиции (фактическое приложение более сложное, чем это с различными вертикальными разбиениями, которыми он / она манипулирует).
- Когда строка элементов управления переносится, слова не переносятся, а выпадающийи флажок может обернуться, но должен обернуться вместе заканчивая словами. Для этой функции я безуспешно экспериментировал с
style="white-space: nowrap", разбросанным между различными группировками DIV, SPAN, P, так как это, кажется, нарушает линейное образование.
Есть ли простой способ сделать это вCSS? Я заметил, что в Chrome, когда элементы управления находятся ближе к верху, он сохраняет свое вертикальное положение, когда я изменяю ширину браузера, но если элементы управления находятся в другом месте, положение не поддерживается ... интересно.
ИлиМне нужно использовать Jquery / Javascript?
Пример кода ниже:
<!doctype html>
<html lang="en">
<head>
</head>
<body>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Blandit libero volutpat sed cras ornare arcu dui vivamus. Ullamcorper eget nulla facilisi etiam dignissim. Sit amet dictum sit amet justo donec enim diam. Eget egestas purus viverra accumsan in nisl nisi scelerisque eu. Ultrices tincidunt arcu non sodales. In mollis nunc sed id semper risus in. Convallis posuere morbi leo urna molestie at elementum eu facilisis. Commodo odio aenean sed adipiscing diam donec adipiscing tristique. Rutrum tellus pellentesque eu tincidunt. Pulvinar mattis nunc sed blandit libero volutpat sed. Amet nisl purus in mollis nunc sed id semper. Accumsan in nisl nisi scelerisque eu. Nulla facilisi nullam vehicula ipsum. Arcu vitae elementum curabitur vitae nunc sed velit. Turpis nunc eget lorem dolor sed viverra ipsum. Nunc sed id semper risus in hendrerit gravida rutrum. Neque ornare aenean euismod elementum nisi quis. Bibendum enim facilisis gravida neque.
Ipsum consequat nisl vel pretium lectus quam id leo in. Imperdiet nulla malesuada pellentesque elit eget gravida. Ut consequat semper viverra nam libero justo laoreet. Nisl rhoncus mattis rhoncus urna neque viverra justo nec ultrices. Pulvinar elementum integer enim neque. Viverra accumsan in nisl nisi. Auctor eu augue ut lectus. Et magnis dis parturient montes nascetur ridiculus mus mauris vitae. Posuere ac ut consequat semper viverra nam libero justo laoreet. Condimentum lacinia quis vel eros donec ac odio tempor. Lobortis mattis aliquam faucibus purus in massa tempor nec feugiat. Scelerisque varius morbi enim nunc faucibus.
Convallis a cras semper auctor neque vitae tempus. Diam quam nulla porttitor massa id neque aliquam. Viverra maecenas accumsan lacus vel. Auctor elit sed vulputate mi sit amet mauris commodo quis. Fringilla urna porttitor rhoncus dolor. Adipiscing commodo elit at imperdiet. Tortor pretium viverra suspendisse potenti nullam ac. Non odio euismod lacinia at. Sit amet est placerat in. Ut tristique et egestas quis ipsum suspendisse ultrices gravida. Scelerisque purus semper eget duis at tellus at urna condimentum. Eget magna fermentum iaculis eu non diam. Sem integer vitae justo eget. Etiam sit amet nisl purus in mollis. Nisl condimentum id venenatis a condimentum vitae sapien.
Sodales neque sodales ut etiam sit amet. Eget velit aliquet sagittis id. Pretium vulputate sapien nec sagittis. Porttitor massa id neque aliquam vestibulum morbi blandit cursus risus. Diam vulputate ut pharetra sit amet aliquam id. Sit amet nisl suscipit adipiscing bibendum est ultricies integer quis. Facilisis sed odio morbi quis commodo. Metus vulputate eu scelerisque felis imperdiet proin fermentum leo. Lectus proin nibh nisl condimentum. Enim blandit volutpat maecenas volutpat blandit aliquam etiam erat. Tempor orci dapibus ultrices in. Fames ac turpis egestas maecenas pharetra convallis posuere morbi. Leo duis ut diam quam nulla porttitor massa. Lobortis scelerisque fermentum dui faucibus in ornare quam. Nisl nunc mi ipsum faucibus. Ut etiam sit amet nisl. Pellentesque adipiscing commodo elit at imperdiet dui accumsan sit.
Pharetra magna ac placerat vestibulum lectus mauris. Tellus elementum sagittis vitae et leo duis ut diam. A erat nam at lectus. Tincidunt augue interdum velit euismod in pellentesque massa placerat. Pellentesque massa placerat duis ultricies lacus sed turpis tincidunt. Mauris cursus mattis molestie a iaculis at. Blandit cursus risus at ultrices. In iaculis nunc sed augue lacus viverra vitae congue. Adipiscing tristique risus nec feugiat. Eget lorem dolor sed viverra ipsum nunc aliquet bibendum enim. Natoque penatibus et magnis dis parturient montes nascetur ridiculus. Nibh venenatis cras sed felis eget velit aliquet sagittis. Dui accumsan sit amet nulla. Suspendisse potenti nullam ac tortor vitae purus faucibus. At augue eget arcu dictum. Luctus venenatis lectus magna fringilla urna. Nulla facilisi etiam dignissim diam quis enim. Et netus et malesuada fames ac turpis egestas.
</p>
<div class="form-check">
<div style="display:inline-block;">
<label class="form-check-label">
<input style="height:1em; width:1em;" type="radio" class="form-check-input" value="popularity" name="tag_order" checked=""><strong>Fix This Postion Vertically (when in view) When Adjusting Browser Width</strong>
</label>
<select id="popular_dropdown">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<div class="checkbox" id="show_all_popular" style="display:inline;">
<label><input id="popular_check" style="height:20px;width:20px;vertical-align: top;" type="checkbox" value="show_all_popular">All</label>
</div>
</div>
</div>
<p style="margin-top:0px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Blandit libero volutpat sed cras ornare arcu dui vivamus. Ullamcorper eget nulla facilisi etiam dignissim. Sit amet dictum sit amet justo donec enim diam. Eget egestas purus viverra accumsan in nisl nisi scelerisque eu. Ultrices tincidunt arcu non sodales. In mollis nunc sed id semper risus in. Convallis posuere morbi leo urna molestie at elementum eu facilisis. Commodo odio aenean sed adipiscing diam donec adipiscing tristique. Rutrum tellus pellentesque eu tincidunt. Pulvinar mattis nunc sed blandit libero volutpat sed. Amet nisl purus in mollis nunc sed id semper. Accumsan in nisl nisi scelerisque eu. Nulla facilisi nullam vehicula ipsum. Arcu vitae elementum curabitur vitae nunc sed velit. Turpis nunc eget lorem dolor sed viverra ipsum. Nunc sed id semper risus in hendrerit gravida rutrum. Neque ornare aenean euismod elementum nisi quis. Bibendum enim facilisis gravida neque.
Ipsum consequat nisl vel pretium lectus quam id leo in. Imperdiet nulla malesuada pellentesque elit eget gravida. Ut consequat semper viverra nam libero justo laoreet. Nisl rhoncus mattis rhoncus urna neque viverra justo nec ultrices. Pulvinar elementum integer enim neque. Viverra accumsan in nisl nisi. Auctor eu augue ut lectus. Et magnis dis parturient montes nascetur ridiculus mus mauris vitae. Posuere ac ut consequat semper viverra nam libero justo laoreet. Condimentum lacinia quis vel eros donec ac odio tempor. Lobortis mattis aliquam faucibus purus in massa tempor nec feugiat. Scelerisque varius morbi enim nunc faucibus.
Convallis a cras semper auctor neque vitae tempus. Diam quam nulla porttitor massa id neque aliquam. Viverra maecenas accumsan lacus vel. Auctor elit sed vulputate mi sit amet mauris commodo quis. Fringilla urna porttitor rhoncus dolor. Adipiscing commodo elit at imperdiet. Tortor pretium viverra suspendisse potenti nullam ac. Non odio euismod lacinia at. Sit amet est placerat in. Ut tristique et egestas quis ipsum suspendisse ultrices gravida. Scelerisque purus semper eget duis at tellus at urna condimentum. Eget magna fermentum iaculis eu non diam. Sem integer vitae justo eget. Etiam sit amet nisl purus in mollis. Nisl condimentum id venenatis a condimentum vitae sapien.
Sodales neque sodales ut etiam sit amet. Eget velit aliquet sagittis id. Pretium vulputate sapien nec sagittis. Porttitor massa id neque aliquam vestibulum morbi blandit cursus risus. Diam vulputate ut pharetra sit amet aliquam id. Sit amet nisl suscipit adipiscing bibendum est ultricies integer quis. Facilisis sed odio morbi quis commodo. Metus vulputate eu scelerisque felis imperdiet proin fermentum leo. Lectus proin nibh nisl condimentum. Enim blandit volutpat maecenas volutpat blandit aliquam etiam erat. Tempor orci dapibus ultrices in. Fames ac turpis egestas maecenas pharetra convallis posuere morbi. Leo duis ut diam quam nulla porttitor massa. Lobortis scelerisque fermentum dui faucibus in ornare quam. Nisl nunc mi ipsum faucibus. Ut etiam sit amet nisl. Pellentesque adipiscing commodo elit at imperdiet dui accumsan sit.
Pharetra magna ac placerat vestibulum lectus mauris. Tellus elementum sagittis vitae et leo duis ut diam. A erat nam at lectus. Tincidunt augue interdum velit euismod in pellentesque massa placerat. Pellentesque massa placerat duis ultricies lacus sed turpis tincidunt. Mauris cursus mattis molestie a iaculis at. Blandit cursus risus at ultrices. In iaculis nunc sed augue lacus viverra vitae congue. Adipiscing tristique risus nec feugiat. Eget lorem dolor sed viverra ipsum nunc aliquet bibendum enim. Natoque penatibus et magnis dis parturient montes nascetur ridiculus. Nibh venenatis cras sed felis eget velit aliquet sagittis. Dui accumsan sit amet nulla. Suspendisse potenti nullam ac tortor vitae purus faucibus. At augue eget arcu dictum. Luctus venenatis lectus magna fringilla urna. Nulla facilisi etiam dignissim diam quis enim. Et netus et malesuada fames ac turpis egestas.
</p>
</body>
</html>