我在css
是新写为目的,这样的代码:
JSFIDDLE HERE!
要实现这个在1024
分辨率:
我如何设置保证金到响应div?
screen: 1,024px
margins-left-right: 50px
columns: 58px
gutter: 12px
在我的代码不能设置50px
裕屏幕左右,我该如何解决这个问题?谢谢大家。
更多解释div col-1
保证金左边col-3 menu
和保证金从屏幕右边。
我在css
是新写为目的,这样的代码:
JSFIDDLE HERE!
要实现这个在1024
分辨率:
我如何设置保证金到响应div?
screen: 1,024px
margins-left-right: 50px
columns: 58px
gutter: 12px
在我的代码不能设置50px
裕屏幕左右,我该如何解决这个问题?谢谢大家。
更多解释div col-1
保证金左边col-3 menu
和保证金从屏幕右边。
上有这样的事情吨的资源,例如,参照w3schools
.mystyle {
margin: 0px 50px 0px 50px
}
或
.mystyle {
margin-left: 50px,
margin-right: 50px
}
添加您div
父/包装容器内,并提供保证金容器。我建议你通过CSS Box model article at MDN。
参考代码:
$(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>
您可以使用media query
来设置不同的屏幕尺寸不同的CSS规则。请参阅以下链接。
,如果你想四面定制缘,它的工作原理顺时针即上,右,下,左
.custommargin{ margin: 0px 0px 0px 0px }
如果你想给上边,下边相同的边缘,同样的右边,左边
.custommargin{ margin: 0px 0px }
如果使用$(document).ready(function(){})
使用$(window).resize(function(){})
所有4个方面
.custommargin{ margin: 0px}
而不是相同的保证金,这样你每次调整你的屏幕上的功能将再次加载。
实施例:
$(window).on('resize', function(){
var win = $(this); //this = window
if (win.width() == 1024) { /* ... */ }
});