删除手机上的边距

时间:2017-07-21 11:01:43

标签: html css

该网站为http://www.jokerleb.com,目前在移动设备上显示为

enter image description here

客户希望它看起来像这样

enter image description here

对于帖子和图片基本没有边距和类似的对齐方式,我试图去掉边距但收效甚微。

相关代码



#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;
&#13;
&#13;

我想复制cat http://jsfiddle.net/4n4exrd7/Here

3 个答案:

答案 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