Ich möchte mein p-Element innerhalb von .a zu .b div auf reagieren zum Beispiel auf 768px wie kann ich das tun?Wie bewegt man div in einem anderen in auf responsive?
div{margin:10px;
padding:10px;}
.a{
background:#f0f0f0;
border:1px solid #ccc;
}
.b{
background:#999;
border:1px solid #666;
}<div class="a">
<p>lorem ipsum dolor site amet...</p>
</div>
<div class="b">
</div>fand ich diese Lösung durch einige jQuery-Code unter Verwendung von (spezifischere, die .resize() function) und durch Zugabe einer ID zum < p> Element, das Sie verschieben möchten (#moveElement):
$(window).resize(function() {
if ($(window).width() < 768) {
$('#moveElement').appendTo('.b');
} else {
$('#moveElement').appendTo('.a');
}});
überprüfen Sie diese fiddle, um ein funktionierendes Beispiel zu sehen.
vielen dank..so können wir das für mobile machen? nicht nur die Größe ändern und mobile ohne Größe ändern –
Das ist ein Fall von richtigen CSS-Regeln entsprechend der Größe Ihres Bildschirms (-Breite) zu definieren. Eine einfache Suche nach 'css media queries' sollte Ihnen genügend Quellen geben, die Ihnen helfen. –
Sie können für die window Breite überprüfen und dann appendTo() Methode verwenden, um das Element .a-.b zu bewegen, wie folgt aus:
if ($(window).width() < 768) {
$('.a p').appendTo('.b');
}div {
margin: 10px;
padding: 10px;
}
.a {
background: #f0f0f0;
border: 1px solid #ccc;
}
.b {
background: #999;
border: 1px solid #666;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="a">
<p>lorem ipsum dolor site amet...</p>
</div>
<div class="b">
</div>Wenn Sie es auf der Größe des Browsers sehen möchten, können Sie $(window).resize(function(){ //your code here... }) neben dem obigen Code verwenden. Etwas wie folgt aus:
$(window).resize(function() {
if ($(window).width() < 768) {
$('.a p').appendTo('.b');
}
}).resize();div {
margin: 10px;
padding: 10px;
}
.a {
background: #f0f0f0;
border: 1px solid #ccc;
}
.b {
background: #999;
border: 1px solid #666;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="a">
<p>lorem ipsum dolor site amet...</p>
</div>
<div class="b">
</div>vielen Dank es funktioniert und ich habe auch eine Frage.Wenn ich Fenstergröße ändern funktioniert es sehr gut, aber wenn ich von meinem mobilen Gerät eingegeben, als es funktioniert warum? –
Ja, richtig. Sie können Ihre HTML-Struktur nicht mit Css ändern. Es kann mit einigen Codezeilen gemacht werden.
window.addEventListener('load', function() {
var a = document.querySelector('.a');
var b = document.querySelector('.b');
var c = document.querySelector('p');
window.addEventListener('resize', function (event) {
if (768 >= window.innerWidth && 'a' === c.dataset.location) {
b.appendChild(c);
c.dataset.location = 'b';
} else if (768 < window.innerWidth && 'b' === c.dataset.location) {
a.appendChild(c);
c.dataset.location = 'a';
}
});
}, {once: true});div {
margin: 10px;
padding: 10px;
}
.a {
background: #f0f0f0;
border: 1px solid #ccc;
}
.b {
background: #999;
border: 1px solid #666;
}<div class="a">
<p data-location="a">lorem ipsum dolor site amet...</p>
</div>
<div class="b">
</div>
Sie können die HTML-Struktur nicht durch CSS ändern. Nur mit js. – 3rdthemagical