该网站为http://www.jokerleb.com,目前在移动设备上显示为
客户希望它看起来像这样
对于帖子和图片基本没有边距和类似的对齐方式,我试图去掉边距但收效甚微。
相关代码
#DIV_1 {
color: rgb(79, 79, 79);
height: 265px;
text-decoration: none solid rgb(79, 79, 79);
width: 167.406px;
column-rule-color: rgb(79, 79, 79);
perspective-origin: 87.7969px 136.594px;
transform-origin: 87.7969px 136.594px;
caret-color: rgb(79, 79, 79);
background: rgb(255, 255, 255) none repeat scroll 0% 0% / auto padding-box border-box;
border: 0px none rgb(79, 79, 79);
border-radius: 6px 6px 6px 6px;
font: normal normal normal normal 12px / 18px Arial, Helvetica, sans-serif;
outline: rgb(79, 79, 79) none 0px;
padding: 4.09375px;
}/*#DIV_1*/
#DIV_2 {
color: rgb(79, 79, 79);
float: left;
height: 91px;
max-width: 85px;
text-decoration: none solid rgb(79, 79, 79);
width: 85px;
column-rule-color: rgb(79, 79, 79);
perspective-origin: 44.1719px 45.5px;
transform-origin: 44.1719px 45.5px;
caret-color: rgb(79, 79, 79);
border: 0px none rgb(79, 79, 79);
font: normal normal normal normal 12px / 18px Arial, Helvetica, sans-serif;
outline: rgb(79, 79, 79) none 0px;
padding: 0px 3.34375px 0px 0px;
}/*#DIV_2*/
#A_3 {
color: rgb(38, 38, 38);
text-decoration: none solid rgb(38, 38, 38);
column-rule-color: rgb(38, 38, 38);
caret-color: rgb(38, 38, 38);
border: 0px none rgb(38, 38, 38);
font: normal normal normal normal 12px / 18px Arial, Helvetica, sans-serif;
outline: rgb(38, 38, 38) none 0px;
}/*#A_3*/
#IMG_4 {
color: rgb(38, 38, 38);
height: 85px;
max-width: 100%;
text-decoration: none solid rgb(38, 38, 38);
width: 85px;
column-rule-color: rgb(38, 38, 38);
perspective-origin: 42.5px 42.5px;
transform-origin: 42.5px 42.5px;
caret-color: rgb(38, 38, 38);
background: rgb(255, 255, 255) none repeat scroll 0% 0% / auto padding-box border-box;
border: 0px none rgb(38, 38, 38);
border-radius: 4px 4px 4px 4px;
font: normal normal normal normal 12px / 18px Arial, Helvetica, sans-serif;
outline: rgb(38, 38, 38) none 0px;
}/*#IMG_4*/
#DIV_5 {
color: rgb(79, 79, 79);
height: 265px;
max-width: 100%;
min-width: 76.2791%;
text-decoration: none solid rgb(79, 79, 79);
width: 167.406px;
column-rule-color: rgb(79, 79, 79);
perspective-origin: 83.7031px 132.5px;
transform-origin: 83.7031px 132.5px;
caret-color: rgb(79, 79, 79);
border: 0px none rgb(79, 79, 79);
font: normal normal normal normal 12px / 18px Arial, Helvetica, sans-serif;
outline: rgb(79, 79, 79) none 0px;
}/*#DIV_5*/
#DIV_5:after {
clear: both;
color: rgb(79, 79, 79);
content: '"' '"';
display: table;
text-decoration: none solid rgb(79, 79, 79);
column-rule-color: rgb(79, 79, 79);
caret-color: rgb(79, 79, 79);
border: 0px none rgb(79, 79, 79);
font: normal normal normal normal 12px / 18px Arial, Helvetica, sans-serif;
outline: rgb(79, 79, 79) none 0px;
}/*#DIV_5:after*/
#DIV_5:before {
color: rgb(79, 79, 79);
content: '"' '"';
display: table;
text-decoration: none solid rgb(79, 79, 79);
column-rule-color: rgb(79, 79, 79);
caret-color: rgb(79, 79, 79);
border: 0px none rgb(79, 79, 79);
font: normal normal normal normal 12px / 18px Arial, Helvetica, sans-serif;
outline: rgb(79, 79, 79) none 0px;
}/*#DIV_5:before*/
#DIV_6 {
bottom: -12px;
color: rgb(79, 79, 79);
float: right;
height: 24px;
right: 24px;
text-decoration: none solid rgb(79, 79, 79);
width: 123.375px;
column-rule-color: rgb(79, 79, 79);
perspective-origin: 61.6875px 12px;
transform-origin: 61.6875px 12px;
caret-color: rgb(79, 79, 79);
border: 0px none rgb(79, 79, 79);
font: normal normal normal normal 12px / 18px Arial, Helvetica, sans-serif;
outline: rgb(79, 79, 79) none 0px;
}/*#DIV_6*/
#SPAN_7 {
bottom: 0px;
color: rgb(255, 255, 255);
display: block;
float: left;
height: 24px;
left: 0px;
position: relative;
right: 0px;
text-decoration: none solid rgb(255, 255, 255);
top: 0px;
width: 81.375px;
column-rule-color: rgb(255, 255, 255);
perspective-origin: 51.6875px 12px;
transform-origin: 51.6875px 12px;
caret-color: rgb(255, 255, 255);
background: rgb(38, 38, 38) none repeat scroll 0% 0% / auto padding-box border-box;
border: 0px none rgb(255, 255, 255);
border-radius: 0 4px 4px 0;
font: normal normal normal normal 11px / 24px Arial, Helvetica, sans-serif;
margin: 0px 0px 0px 20px;
outline: rgb(255, 255, 255) none 0px;
padding: 0px 10px 0px 12px;
}/*#SPAN_7*/
#SPAN_7:after {
bottom: 10px;
color: rgb(255, 255, 255);
content: '""';
display: block;
height: 4px;
left: 0px;
position: absolute;
right: 99.375px;
text-decoration: none solid rgb(255, 255, 255);
top: 10px;
width: 4px;
column-rule-color: rgb(255, 255, 255);
perspective-origin: 2px 2px;
transform-origin: 2px 2px;
caret-color: rgb(255, 255, 255);
background: rgb(255, 255, 255) none repeat scroll 0% 0% / auto padding-box border-box;
border: 0px none rgb(255, 255, 255);
border-radius: 2px 2px 2px 2px;
font: normal normal normal normal 11px / 24px Arial, Helvetica, sans-serif;
outline: rgb(255, 255, 255) none 0px;
}/*#SPAN_7:after*/
#SPAN_7:before {
bottom: 0px;
color: rgb(255, 255, 255);
content: '""';
display: block;
height: 0px;
left: -12px;
position: absolute;
right: 103.375px;
text-decoration: none solid rgb(255, 255, 255);
top: 0px;
width: 0px;
column-rule-color: rgb(255, 255, 255);
perspective-origin: 6px 12px;
transform-origin: 6px 12px;
caret-color: rgb(255, 255, 255);
border-top: 12px solid rgba(0, 0, 0, 0);
border-right: 12px solid rgb(38, 38, 38);
border-bottom: 12px solid rgba(0, 0, 0, 0);
border-left: 0px solid rgba(0, 0, 0, 0);
font: normal normal normal normal 11px / 24px Arial, Helvetica, sans-serif;
outline: rgb(255, 255, 255) none 0px;
}/*#SPAN_7:before*/
#P_8 {
color: rgb(255, 255, 255);
float: right;
height: 22px;
overflow-wrap: break-word;
text-decoration: none solid rgb(255, 255, 255);
width: 81.375px;
word-wrap: break-word;
column-rule-color: rgb(255, 255, 255);
perspective-origin: 40.6875px 15.5px;
transform-origin: 40.6875px 15.5px;
caret-color: rgb(255, 255, 255);
border: 0px none rgb(255, 255, 255);
font: normal normal normal normal 16px / normal "Open Sans", sans-serif, Arial, Helvetica, sans-serif;
margin: 0px;
outline: rgb(255, 255, 255) none 0px;
padding: 1px 0px 8px;
}/*#P_8*/
#H3_9 {
color: rgb(79, 79, 79);
height: 34px;
max-width: 100%;
text-decoration: none solid rgb(79, 79, 79);
text-transform: uppercase;
width: 167.406px;
column-rule-color: rgb(79, 79, 79);
perspective-origin: 83.7031px 17px;
transform-origin: 83.7031px 17px;
caret-color: rgb(79, 79, 79);
border: 0px none rgb(79, 79, 79);
font: normal normal bold normal 17px / 17px Arial, Helvetica, sans-serif;
margin: 0px;
outline: rgb(79, 79, 79) none 0px;
}/*#H3_9*/
#A_10 {
color: rgb(38, 38, 38);
text-decoration: none solid rgb(38, 38, 38);
text-transform: uppercase;
column-rule-color: rgb(38, 38, 38);
caret-color: rgb(38, 38, 38);
border: 0px none rgb(38, 38, 38);
font: normal normal bold normal 17px / 17px Arial, Helvetica, sans-serif;
outline: rgb(38, 38, 38) none 0px;
}/*#A_10*/
#DIV_11, #DIV_19, #DIV_22 {
clear: both;
color: rgb(79, 79, 79);
text-decoration: none solid rgb(79, 79, 79);
width: 167.406px;
column-rule-color: rgb(79, 79, 79);
perspective-origin: 83.7031px 0px;
transform-origin: 83.7031px 0px;
caret-color: rgb(79, 79, 79);
border: 0px none rgb(79, 79, 79);
font: normal normal normal normal 0px / 0px Arial, Helvetica, sans-serif;
outline: rgb(79, 79, 79) none 0px;
overflow: hidden;
}/*#DIV_11, #DIV_19, #DIV_22*/
#P_12 {
color: rgb(175, 175, 175);
height: 58px;
overflow-wrap: break-word;
text-decoration: none solid rgb(175, 175, 175);
width: 167.406px;
word-wrap: break-word;
column-rule-color: rgb(175, 175, 175);
perspective-origin: 83.7031px 33px;
transform-origin: 83.7031px 33px;
caret-color: rgb(175, 175, 175);
border: 0px none rgb(175, 175, 175);
font: normal normal normal normal 11px / 18px Arial, Helvetica, sans-serif;
margin: 0px;
outline: rgb(175, 175, 175) none 0px;
padding: 4px 0px;
}/*#P_12*/
#SPAN_13 {
color: rgb(175, 175, 175);
overflow-wrap: break-word;
text-decoration: none solid rgb(175, 175, 175);
word-wrap: break-word;
column-rule-color: rgb(175, 175, 175);
caret-color: rgb(175, 175, 175);
border: 0px none rgb(175, 175, 175);
font: normal normal normal normal 11px / 18px Arial, Helvetica, sans-serif;
outline: rgb(175, 175, 175) none 0px;
padding: 0px 7px 0px 0px;
}/*#SPAN_13*/
#SPAN_13:before {
color: rgb(175, 175, 175);
content: '""';
display: inline-block;
height: 20px;
overflow-wrap: break-word;
text-align: center;
text-decoration: none solid rgb(175, 175, 175);
vertical-align: top;
width: 20px;
word-wrap: break-word;
column-rule-color: rgb(175, 175, 175);
perspective-origin: 10px 10px;
transform-origin: 10px 10px;
caret-color: rgb(175, 175, 175);
border: 0px none rgb(175, 175, 175);
font: normal normal normal normal 20px / 20px dashicons;
margin: 0px 5px 0px 0px;
outline: rgb(175, 175, 175) none 0px;
}/*#SPAN_13:before*/
#A_14, #A_16, #SPAN_18 {
color: rgb(175, 175, 175);
overflow-wrap: break-word;
text-decoration: none solid rgb(175, 175, 175);
word-wrap: break-word;
column-rule-color: rgb(175, 175, 175);
caret-color: rgb(175, 175, 175);
border: 0px none rgb(175, 175, 175);
font: normal normal normal normal 11px / 18px Arial, Helvetica, sans-serif;
outline: rgb(175, 175, 175) none 0px;
}/*#A_14, #A_16, #SPAN_18*/
#SPAN_15 {
color: rgb(175, 175, 175);
overflow-wrap: break-word;
text-decoration: none solid rgb(175, 175, 175);
word-wrap: break-word;
column-rule-color: rgb(175, 175, 175);
caret-color: rgb(175, 175, 175);
border: 0px none rgb(175, 175, 175);
font: normal normal normal normal 11px / 18px Arial, Helvetica, sans-serif;
outline: rgb(175, 175, 175) none 0px;
padding: 0px 7px 0px 5px;
}/*#SPAN_15*/
#SPAN_17 {
color: rgb(175, 175, 175);
overflow-wrap: break-word;
text-decoration: none solid rgb(175, 175, 175);
word-wrap: break-word;
column-rule-color: rgb(175, 175, 175);
caret-color: rgb(175, 175, 175);
border: 0px none rgb(175, 175, 175);
font: normal normal normal normal 11px / 18px Arial, Helvetica, sans-serif;
outline: rgb(175, 175, 175) none 0px;
padding: 0px 7px 0px 5px;
}/*#SPAN_17*/
#SPAN_17:before {
color: rgb(175, 175, 175);
content: '""';
display: inline-block;
height: 20px;
overflow-wrap: break-word;
text-align: center;
text-decoration: none solid rgb(175, 175, 175);
vertical-align: top;
width: 20px;
word-wrap: break-word;
column-rule-color: rgb(175, 175, 175);
perspective-origin: 10px 10px;
transform-origin: 10px 10px;
caret-color: rgb(175, 175, 175);
border: 0px none rgb(175, 175, 175);
font: normal normal normal normal 20px / 20px dashicons;
margin: 0px 5px 0px 0px;
outline: rgb(175, 175, 175) none 0px;
}/*#SPAN_17:before*/
#P_20 {
color: rgb(79, 79, 79);
height: 54px;
overflow-wrap: break-word;
text-decoration: none solid rgb(79, 79, 79);
width: 167.406px;
word-wrap: break-word;
column-rule-color: rgb(79, 79, 79);
perspective-origin: 83.7031px 33px;
transform-origin: 83.7031px 33px;
caret-color: rgb(79, 79, 79);
border: 0px none rgb(79, 79, 79);
font: normal normal normal normal 12px / 18px Arial, Helvetica, sans-serif;
margin: 0px;
outline: rgb(79, 79, 79) none 0px;
padding: 6px 0px;
}/*#P_20*/
#P_21 {
clear: both;
color: rgb(175, 175, 175);
float: right;
height: 18px;
overflow-wrap: break-word;
text-decoration: none solid rgb(175, 175, 175);
width: 108.844px;
word-wrap: break-word;
column-rule-color: rgb(175, 175, 175);
perspective-origin: 54.4219px 9px;
transform-origin: 54.4219px 9px;
caret-color: rgb(175, 175, 175);
border: 0px none rgb(175, 175, 175);
font: normal normal normal normal 11px / 18px Arial, Helvetica, sans-serif;
margin: 0px;
outline: rgb(175, 175, 175) none 0px;
}/*#P_21*/
#DIV_23 {
clear: both;
color: rgb(79, 79, 79);
text-decoration: none solid rgb(79, 79, 79);
width: 167.406px;
column-rule-color: rgb(79, 79, 79);
perspective-origin: 83.7031px 0px;
transform-origin: 83.7031px 0px;
caret-color: rgb(79, 79, 79);
border: 0px none rgb(79, 79, 79);
font: normal normal normal normal 0px / 0px Arial, Helvetica, sans-serif;
outline: rgb(79, 79, 79) none 0px;
overflow: hidden;
}/*#DIV_23*/

<div id="DIV_1">
<div id="DIV_2">
<a href="http://www.jokerleb.com/ads/honda-crv-2012-2/" title="Honda CRV 2012" id="A_3"><img width="250" height="250" src="http://www.jokerleb.com/wp-content/uploads/2017/05/584970-250x250.jpg" alt="IMG_9935" id="IMG_4" /></a>
</div>
<div id="DIV_5">
<div id="DIV_6">
<span id="SPAN_7"></span>
<p id="P_8">
$19,999.00
</p>
</div>
<h3 id="H3_9">
<a href="http://www.jokerleb.com/ads/honda-crv-2012-2/" id="A_10">Honda CRV 2012</a>
</h3>
<div id="DIV_11">
</div>
<p id="P_12">
<span id="SPAN_13"><a href="http://www.jokerleb.com/ad-category/vehicles/cars/honda/" rel="tag" id="A_14">Honda</a></span> <span id="SPAN_15"><a href="http://www.jokerleb.com/author/joker-dealshotmail-com/" title="Posts by joker.deals@hotmail.com" rel="author" id="A_16">joker.deals@hotmail.com</a></span> <span id="SPAN_17"><span id="SPAN_18">July 8, 2017</span></span>
</p>
<div id="DIV_19">
</div>
<p id="P_20">
EXL / special edition / telephone / rear camera / 2 Keys / new tyres
</p>
<p id="P_21">
34 total views, 0 today
</p>
<div id="DIV_22">
</div>
</div>
<div id="DIV_23">
</div>
</div>
&#13;
我想复制cat http://jsfiddle.net/4n4exrd7/。 Here
答案 0 :(得分:0)
我检查了你的代码,看起来你有这个
@media screen and (max-width: 960px) {
.header_top_res, .header_top_res, .header_main_res, .header_menu_res, .content_res, #search-bar, .footer_main_res, .footer_menu_res {
width: 90%;
}
}
这样可以让你在两侧间隔,然后就可以了。
.post-block-out {
margin: 0 0 8px 0;
-webkit-border-radius: 6px;
border-radius: 6px;
}
这为您提供了保证金最低点。 只需添加另一个媒体查询:
@media screen and (max-width: 640px) {
.content_res {
width: 100%;
}
.post-block-out {
margin-bottom: 0;
}
}
答案 1 :(得分:0)
看起来你想要这个:
@media screen and (max-width:400px)
{
body{
margin:0px;
}
}
将此添加到您的CSS
答案 2 :(得分:0)
尝试这样的事情。 在媒体查询中删除边距值并将其设为“自动”
isActive