Как расположить два элемента div с абсолютным позиционированием рядом друг с другом на мобильном устройстве?
Я хочу расположить два абсолютных div рядом на мобильном устройстве, но есть разрыв между двумя div.
Я хочу расположить их рядом, если размер мобильного устройства изменится (гибко)
Заранее спасибо!
#header {
position: relative;
}
#menu {
background-color: green;
position: absolute;
right: auto;
left: 0;
bottom: 0;
top: 0;
}
#tab {
background-color:pink;
position: absolute;
overflow: auto;
right: 0;
bottom: 0;
top: 0;
z-index: 10;
padding: 1.2rem;
width: 70%;
display: block;
}<div class = "header">
<div id = "menu">menu</div>
<div id = "search"></div>
<div id = "tab">tab</div>
</div>Как обычно, у этого может быть несколько ответов, и у каждого есть свои хитрости. Выберите из того, что лучше всего подходит к тому, что вы хотите
Я искал @JitendraAhuja. Мне нужны два абсолютных div, а не обычные div.
Я полагаю, что для того, чтобы сделать его отзывчивым, медиа-запрос должен быть лучшим решением.
Я добавил код в ответы в самом начале, просмотрите его. Я думаю, это лучше всего подходит для того, что вы хотите
@JitendraAhuja Я не вижу никакой разницы между моим и вашим кодом
Пожалуйста, добавьте комментарий, прежде чем понизить голос
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 6
Просто снимите обивку и установите ее сверху. Примечание: фиксированная ширина может испортить ваш макет в зависимости от того, что вы хотите сделать.
#header {
position: relative;
}
.item {
position: absolute;
bottom: 0;
top: 0;
}
#menu {
right: auto;
left: 0;
}
#tab {
overflow: auto;
right: 0;
width: 70%;
}<div class = "header">
<div id = "menu" class = "item">menu</div>
<div id = "search"></div>
<div id = "tab" class = "item">tab</div>
</div>Просто удалите padding, назначенный в id tab. и добавьте top : 0.
#header {
position: relative;
}
#menu {
position: absolute;
right: auto;
left: 0;
bottom: 0;
top: 0;
}
#tab {
position: absolute;
overflow: auto;
right: 0;
z-index: 10;
/*padding: 1.2rem;*/
width: 70%;
top: 0;
}<div class = "header">
<div id = "menu">menu</div>
<div id = "search"></div>
<div id = "tab">tab</div>
</div>Все, что вам нужно сделать, это удалить padding и добавить top 0 для tab класса :) и все готово.
#header {
position: relative;
}
#menu {
position: absolute;
right: auto;
left: 0;
bottom: 0;
top: 0;
}
#tab {
position: absolute;
overflow: auto;
right: 0;
top: 0;
z-index: 10;
width: 70%
}<div class = "header">
<div id = "menu">menu</div>
<div id = "search"></div>
<div id = "tab">tab</div>
</div>Или посмотрите на скрипку: https://jsfiddle.net/6qea1os3/
#header {
position: relative;
}
*{
box-sizing:border-box;
}
#menu {
position: absolute;
right: auto;
width:50vw;
height:100vh;
background:red;
left: 0;
bottom: 0;
top: 0;
}
#tab {
position: absolute;
overflow: auto;
top:0;
left:50vw;
z-index: 10;
padding:1.2rem;
width: 50vw;
height:100vh;
background:yellow;
}<div class = "header">
<div id = "menu">menu</div>
<div id = "tab">tab</div>
</div>добавление box-sizing:border-box решит проблему!
Почти там, вам просто нужно было использовать проценты и вычислить противоположную сторону.
Рабочий пример: https://jsfiddle.net/bnx6ozh4/
<div class = "header">
<div id = "menu">menu</div>
<div id = "search"></div>
<div id = "tab">tab</div>
</div>
И для СС
#header {
position: relative;
}
#menu {
position: absolute;
bottom: 0;
top: 0;
width: 20%;
right: 80%;
background: green;
}
#tab {
position: absolute;
overflow: auto;
right: 0;
z-index: 10;
padding: 1.2rem;
left: 20%;
background: red;
}
Это уже выровнено, я добавляю только цвет фона и верхние свойства CSS, чтобы показать вам, и я удаляю отступы, чтобы вы ясно это показали.
#header {
position: relative;
}
#menu {
position: absolute;
right: auto;
left: 0;
bottom: 0;
top: 0;
width: 50vw;
height: 100vh;
background-color: skyblue;
}
#tab {
position: absolute;
top: 0;
left:50vw;
z-index: 10;
/*padding: 1.2rem;*/
width: 50vw;
height: 100vh;
background-color: teal;
}<div class = "header">
<div id = "menu">menu</div>
<div id = "search"></div>
<div id = "tab">tab</div>
</div>Спасибо @Nisharg, но вы удалили один из моих div
это пустой div, поэтому я удалил его LOL
В примере я ничего не дал, но есть окно поиска :)
хорошо для вашего счастья, я добавил это хорошо
не забудьте проголосовать и проверить этот ответ как лучший ответ для вас, нажав стрелку вправо, спасибо!
его уже выровняли, используйте text-align: right, чтобы показать это, и top: 0