Question

我正在网站re reamp上工作，并且在分隔一组div时遇到一些麻烦。 div实际上几乎是间隔很大的。定位，问题是他们正在使用＆＃34; border-spacing＆＃34;属性。如果你看看附加的screeshot，你可以看到＆＃34; border-spacing＆＃34;导致div在两侧间隔开，导致它们在页面的其余部分左侧和右侧略微缩进（参见div上方的红色块，它们缩进了一个从边界间隔一点点）。我尝试用margin-right替换边框间距，但它根本没有做任何事情。关于如何在div之间设置间距的任何建议？

＆＃13;

    .community .atable {
    	display: table;
    	border-collapse: separate;
    	border: 0px;
    	padding: 0px;
    	outline: none;
    	border-spacing: 1.5em;
    	width: 100%;
    	table-layout: fixed;
    }
    .community .atable .arow {
    	display: table-row;
    }
    .community .atable .acell {
    	display: table-cell;
    	height: 100%;
    	width: 33%;
    	border-radius: 3px;
    	-webkit-border-radius: 3px;
    	-moz-border-radius: 3px;
    	border: 1px solid #ccc;
    	background-color: #fff;
    	outline: none;
    	vertical-align: top;
    }
    
    .community .atable .acell .contentbox {
    	position: relative;
    }
    .community .atable .acell .contentbox .pad {
    	padding: 2%;
    }

＆＃13;

    <div class="row2">
        <div class="community">
        <div class="wrap">
    
        <div class="atable">
        <div class="acell">
        <div class="contentbox">
        <a href="https://www.facebook.com/CityofNewportRI" target="_blank"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/gov-img.jpg" alt="Facebook" /><span class="covered">Government Call-to-Action here.</span></a>
        </div>
        </div>
    
        <div class="acell">
        <div class="contentbox">
        <a href="https://www.youtube.com/channel/UCQEXfLzrNpxe7AZme3dTP0w" target="_blank"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/problem-img.jpg" alt="Youtube" /><span class="covered">Report a Problem.</span></a>
        </div>
        </div>
    
        <div class="acell">
        <div class="contentbox">
        <a href="<?php bloginfo('url'); ?>/projects/photos"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/howdoi-img.jpg" alt="Photo Project" /><span class="covered">How Do I ______? Call-to-Action here.</span></a>
        </div>
        </div>
    
        </div>
        </div>
        </div>
      </div>

＆＃13;

Answer 1

请尝试使用display:flex和justify-content:space-between，而不要使用width和border-spacing。您还需要更改子元素的.community .atable { display: flex; justify-content:space-between; border: 0px; padding: 0px; outline: none; width: 100%; } .community .atable .arow { display: table-row; } .community .atable .acell { display: table-cell; height: 100%; width: calc(33% - 1.5em); border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border: 1px solid #ccc; background-color: #fff; outline: none; vertical-align: top; } .community .atable .acell .contentbox { position: relative; } .community .atable .acell .contentbox .pad { padding: 2%; }，减去您用于<div class="row2"> <div class="community"> <div class="wrap"> <div class="atable"> <div class="acell"> <div class="contentbox"> <a href="https://www.facebook.com/CityofNewportRI" target="_blank"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/gov-img.jpg" alt="Facebook" /><span class="covered">Government Call-to-Action here.</span></a> </div> </div> <div class="acell"> <div class="contentbox"> <a href="https://www.youtube.com/channel/UCQEXfLzrNpxe7AZme3dTP0w" target="_blank"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/problem-img.jpg" alt="Youtube" /><span class="covered">Report a Problem.</span></a> </div> </div> <div class="acell"> <div class="contentbox"> <a href="<?php bloginfo('url'); ?>/projects/photos"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/howdoi-img.jpg" alt="Photo Project" /><span class="covered">How Do I ______? Call-to-Action here.</span></a> </div> </div> </div> </div> </div> </div>的值。您可能需要在flexbox properties和calc value前加上前缀，具体取决于您要支持的浏览器。

＆＃13;

unset($model->CHANGEDATE)

＆＃13;

class model {
public $CHANGEDATE;
...
}

＆＃13;

Answer 2

最简单的解决方案是对display:table元素应用负左右边距，以补偿应用于这些边的边界间距。您还需要相应地增加宽度（IE9及更高版本支持calc。）

.community .atable {
    margin-left: -1.5em;
    margin-right: -1.5em;
    width: calc(100% + 3em);

那就是说，我鼓励你练习使用flexbox作为更具前瞻性的解决方案。

边界间距有问题

2 个答案: