Wie kann ich die Marge auf Responsive div einstellen?

Question

Ich bin neu in css und schreiben diesen Code zu diesem Zweck:
JSFIDDLE HERE!
wollen dies in Auflösung 1024 erreichen: kann 50px Marge nicht gesetzt

screen: 1,024px 
margins-left-right: 50px 
columns: 58px 
gutter: 12px 

in meinem Code für Bildschirm links und rechts, wie kann ich dieses Problem lösen? Danke an alle.
für mehr erklären div col-1 Rand links col-3 menu und Rand rechts vom Bildschirm.

Answer 1

Es gibt Unmengen von Ressourcen auf diese Art der Sache, zum Beispiel, siehe w3schools

.mystyle { 
    margin: 0px 50px 0px 50px 
} 

oder

.mystyle { 
    margin-left: 50px, 
    margin-right: 50px 
} 

Answer 2

Fügen Sie Ihre div innerhalb eines Eltern-/Wrapper Behälter aufnehmen und der Rand an den Behälter .

Ich würde vorschlagen, dass Sie durch die CSS Box model article at MDN gehen.

Siehe Code:

$(document).ready(function() { 
 

 
    var screenSize = screen.width; 
 
    //alert('type='+jQuery.type(screenSize)); 
 
    if (screenSize == 1024) { 
 
    $(".col-1").css("width", "58px"); 
 
    alert('width success!'); 
 

 
    $(".col-1").css("margin", "12px;"); 
 
    alert('margin success!'); 
 

 

 

 
    } 
 

 
});

* { 
 
    box-sizing: border-box; 
 
} 
 

 
.parent { 
 
    margin: 0 50px; 
 
} 
 

 
.row::after { 
 
    content: ""; 
 
    clear: both; 
 
    display: table; 
 
} 
 

 
[class*="col-"] { 
 
    float: left; 
 
    padding: 15px; 
 
} 
 

 
.col-1 { 
 
    width: 58px; 
 
    background-color: chocolate; 
 
    margin: 12px; 
 
} 
 

 
html { 
 
    font-family: "Lucida Sans", sans-serif; 
 
} 
 

 
.header { 
 
    background-color: #9933cc; 
 
    color: #ffffff; 
 
    padding: 15px; 
 
} 
 

 
.menu ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
img { 
 
    display: block; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
} 
 

 
.menu li { 
 
    padding: 8px; 
 
    margin-bottom: 7px; 
 
    background-color: #33b5e5; 
 
    color: #ffffff; 
 
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); 
 
} 
 

 
.menu li:hover { 
 
    background-color: #0099cc; 
 
} 
 

 
body { 
 
    background-color: darkgray; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="parent"> 
 
    <div class="header"> 
 
    <h1>Chania</h1> 
 
    </div> 
 

 
    <div class="row"> 
 

 
    <div class="col-3 menu"> 
 
     <ul> 
 
     <li>The Flight</li> 
 
     <li>The City</li> 
 
     <li>The Island</li> 
 
     <li>The Food</li> 
 
     </ul> 
 
    </div> 
 

 
    <div class="col-1"> 
 
     <img src="https://assets.bwbx.io/images/users/iqjWHBFdfxIU/i7T6Dp0ts0sQ/v1/-1x-1.jpg" /> 
 
    </div> 
 
    <div class="col-1">B</div> 
 
    <div class="col-1">C</div> 
 
    <div class="col-1">D</div> 
 
    <div class="col-1">E</div> 
 
    <div class="col-1">F</div> 
 
    <div class="col-1">G</div> 
 
    <div class="col-1">H</div> 
 
    <div class="col-1">I</div> 
 
    <div class="col-1">J</div> 
 
    <div class="col-1">K</div> 
 
    <div class="col-1">L</div> 
 

 
    </div> 
 
</div>

Answer 3

Sie media query können verschiedene CSS-Regeln für verschiedene Bildschirmgrößen einzustellen. Bitte beachten Sie die folgenden Links.

• https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
• https://www.w3schools.com/css/css3_mediaqueries_ex.asp
• Media Queries: Screen > 1024

Answer 4

, wenn Sie benutzerdefinierte Rand an allen vier Seiten wollen, funktioniert es im Uhrzeigersinn, dh oberen, rechten, unteren, linken

.custommargin{ margin: 0px 0px 0px 0px } 

wenn Sie wollen den gleichen Rand oben, unten und gleich rechts, links geben

.custommargin{ margin: 0px 0px } 

wenn gleiche Marge auf allen 4 Seiten

.custommargin{ margin: 0px} 

Answer 5

Anstelle der Verwendung von $(document).ready(function(){}) Verwendung $(window).resize(function(){}) so, dass jedes Mal, wenn Sie Ihren Bildschirm die Größe wird die Funktion wieder laden.

Beispiel:

$(window).on('resize', function(){ 
     var win = $(this); //this = window 
     if (win.width() == 1024) { /* ... */ } 
}); 

Referenz: jQuery on window resize