Question

我正在尝试创建一个每个50％宽度的框的集合，边距可以折叠以创建均匀的间距，但也可以放在彼此旁边。

类似的东西：

<style>
body{
 margin:0;
}
.showCases{
 background-color:#000;
 overflow:auto;
}
.showCases>div{
 width:50%;
 margin:20px;
 color:#fff;
 border:1px solid #fff;
}
</style>
<body>
 <div class="showCases">
  <div>
   box1
  </div>
  <div>
   box2
  </div>
 </div>
</body>

有没有办法只使用父div和子div？或者我是否必须创建孙子div？

Answer 1

使用display:table并添加table-layout:fixed - ＆gt;所有单元格宽度相同

.table {
  width: 100%;
  display: table;
  table-layout: fixed;
  background-color: black;
  color: white;
  border-spacing: 10px;
}
.trow {
  display: table-row
}
.tcell {
  display: table-cell;
  border: 1px solid white;
}

<div class="table">
  <div class="trow">
    <div class="tcell">cell 1</div>
    <div class="tcell">cell 2</div>
  </div>
  <div class="trow">
    <div class="tcell">cell 3</div>
    <div class="tcell">cell with more text 4</div>
  </div>
</div>

Answer 2

如果在flex-items上设置Flexbox，在flex-container上设置相同数量的margin，则可以使用padding获得此类内容。这将在每个flex-item与parent和flex-items之间创建相同的间距

body {
  margin: 0;
}
.showCases {
  background-color: #000;
  display: flex;
  padding: 10px;
}
.showCases > div {
  flex: 1;
  margin: 10px;
  color: #fff;
  border: 1px solid #fff;
}

<div class="showCases">
  <div>box1</div>
  <div>box2</div>
</div>

Answer 3

像这样：https://jsfiddle.net/virginieLGB/b1a9L7fa/1/？

Private Sub Report_Click()

 Sheets("sheetname").SaveAs Filename:="\\shared_folder_path\master" & Sheets("sheetname").Range("A2"), _
                            FileFormat:=52, _
                            Password:="password", _
                            WriteResPassword:="password", _
                            ReadOnlyRecommended:=False, _
                            CreateBackup:=False

End Sub

Answer 4

对齐块时要记住的几件事情;

组合宽度（包括边距）不能大于100％（一般来说，有例外）。不要忘记，没有盒子大小：边框，边框和填充数也是这个宽度！
当你想让两个元素彼此相邻时，你需要使用display：block和float：left告诉他们，或者使用display：inline-block。

看到这个小提琴：https://jsfiddle.net/b1a9L7fa/3/

body{
 margin:0;
}
.showCases{
 background-color:#000;
 overflow:auto;
}
.showCases>div{
 width:46%;
 margin:20px;
 margin-right: 2.5%;
 margin-left: 2.5%;
 color:#fff;
 border:1px solid #fff;
 display: block;
 float: left;
}
.showCases>div:last-of-type{
  margin-right: 0;
  margin-left: 0;
}

Answer 5

您可以使用弹性工具网格平均分割您的方框。

只需将这两个规则添加到CSS： https://jsfiddle.net/8v0qmk1h/

.showCases{
    display: flex;
}

.showCases>div{
    flex: 1;
}

Answer 6

你应该使用

display:inline-block
width:calc(50% - 44px);

on child div

https://jsfiddle.net/b1a9L7fa/4/

CSS使用div

6 个答案: