Question

我有这个JSFiddle：https://jsfiddle.net/96urhqcz/

连续有4个div - HTML看起来像这样：

  <div class="g-1-4 app">
    <a style="text-decoration:none;" href="https://link1/">
    <div style="margin:10px; padding: 30px 0px; background:#E74C3C" class="app">
        <i class="fa fa-3x fa-comments-o" width="50%" style="display:block; margin:auto" src="/static/launcher/comments-o"></i> 
        Link Number 1
    </div>
    </a>
  </div>

  <div class="g-1-4 app">
    <a style="text-decoration:none;" href="https://link2/">
    <div style="margin:10px; padding: 30px 0px; background:#9D55B8" class="app">
        <i class="fa fa-3x fa-paper-plane" width="50%" style="display:block; margin:auto" src="/static/launcher/paper-plane"></i> 
        Link Number 2
    </div>
    </a>
  </div>

  <div class="g-1-4 app">
    <a style="text-decoration:none;" href="https://link3/">
    <div style="margin:10px; padding: 30px 0px; background:#3395DD" class="app">
        <i class="fa fa-3x fa-street-view" width="50%" style="display:block; margin:auto" src="/static/launcher/street-view"></i> 
        Link 3
    </div>
    </a>
  </div>

  <div class="g-1-4 app">
    <a style="text-decoration:none;" href="https://link4/">
    <div style="margin:10px; padding: 30px 0px; background:#00838F" class="app">
        <i class="fa fa-3x fa-line-chart" width="50%" style="display:block; margin:auto" src="/static/launcher/line-chart"></i> 
        Link 4
    </div>
    </a>
  </div>

g-1-4的CSS看起来像这样：

.g-1-4{
    width: 25%;
}

正如你在JSFiddle中看到的那样 - 盒子之间的边距是相互关联的＆＃39;到适当的方框。

最终，我尝试使用4-across布局，但边距不。当用户将鼠标放在盒子之间时，我希望它是一个没有可点击性的普通鼠标。

我确信这件事情很简单，我很遗憾 - 但我似乎无法纠正它。

有什么想法或想法吗？

Answer 1

您可以为div设置固定宽度，并使用 flexbox 自动显示空格，而不是'链接'。

希望这些小代码可以帮到你。

.flex {
  display : flex;
  justify-content : space-around;
}

.div1, .div3 {
  width : 120px;
  height : 120px;
  background-color : red;
}

.div2, .div4 {
  width : 120px;
  height : 120px;
  background-color : blue;
}

p {
  margin : 0;
  color : white;
  line-height: 120px;
  font-size : 12px;
  text-align : center;
}

<div class="flex">

  <a href="#" class="div1">
    <p>LINK 1</p>
  </a>
  
  <a href="#" class="div2">
    <p>LINK 2</p>
  </a>
  
  <a href="#" class="div3">
    <p>LINK 3</p>
  </a>
  
  <a href="#" class="div4">
    <p>LINK 4</p>
  </a>

</div>

Answer 2

取下public PixsellOrders(string windowTitle) { InitializeComponent(); DataContext = this; //... }的边距并将其添加到包裹div的<div>。同时将<a>添加到style="display:block:"。

This CodePen has the updates.

Answer 3

问题来自您使用表格单元格显示方法。

.g > div,
.g-m > div {
  display: table-cell;
  vertical-align: top;
}

我也支持路易斯指出的弹性盒使用方法。

Answer 4

发生的事情是link元素正在扩展到容器div的100％以获得一些空间，你可以为a标签设置一个特定的宽度，或者你可以在容器元素中添加一些填充，你将不得不玩填充和宽度，使它看起来不错。

https://jsfiddle.net/96urhqcz/1/

.g-1-4{
    width: 25%;
    padding: 10px;
}

保证金包含在链接中 - 需要从链接区域中排除保证金

4 个答案: