Question

我想创建一个响应式布局，其中内部div具有填充，自己的背景颜色和彩色边框。

内部div与内部div之间的空间与容器div的框架之间的空间应相等。

我可以用三层div来解决这个问题：容器，内部div的容器，内部div。

.container {
    box-sizing: border-box;
    padding-top: 1.5em;
    padding-left: 1.5em;
}

.containers {
    float: left;
    width: 50%;
    box-sizing: border-box;
    padding-bottom: 1.5em;
    padding-right: 1.5em;
}

.item {
    background: rgba(0, 0, 0, 0.1);
    padding: 1.5em;
    border: 0.5em solid rgba(0, 0, 0, 0.4);
}

jsfiddle demo

如果不使用额外的div层，我可以获得相同的结果吗？我应该看看flexbox吗？

Answer 1

使用保证金来隔离物品怎么样？您仍然可以使用内部填充和边框。我也在你的容器中添加了一个clearfix。

http://codepen.io/anon/pen/zvbKdZ

*{
  box-sizing: border-box;
}

body {
    background: pink;
}

.container {
    padding-top: 1.5em;
    padding-left: 1.5em;
}

.container:before, .container:after{
  clear: both;
  content: "";
  display: table;
}

.item {
    float: left;
    width: 48.5%;
    margin-right: 1.5%;
    margin-bottom: 1.5%;
    background: rgba(0, 0, 0, 0.1);
    padding: 1.5em;
    border: 0.5em solid rgba(0, 0, 0, 0.4);
}

@media screen and (max-width: 600px) {
    .containers {
        width: 100%;
    }
}

Answer 2

是的，有可能。检查一下（.container已删除）

Jsfiddle

＆＃13;

body {
  background: pink;
}
.item {
  float: left;
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.1);
  padding: 1.5em;
  margin: 1.5em;
  border: 0.5em solid rgba(0, 0, 0, 0.4);
  width: calc(50% - 4em);
}
@media screen and (max-width: 600px) {
  .item {
    width: calc(100% - 4em);
    margin-bottom: 0;
  }
  .item:last-child {
    margin-bottom: 1.5em;
  }
}

＆＃13;

<div class="containers">
  <div class="item">Lorem ipsum dolor sit amet, eam labores nusquam periculis et, sed ancillae salutatus te, an alia unum decore vim. Quas timeam aeterno ex sea, tale solum usu id. Eu impetus officiis quo. Viderer voluptatibus an eam, possim commune eum ut, te animal suavitate
    complectitur sed. Numquam veritus delicata duo ea, vix ad dicta meliore.</div>
  <div class="item">Lorem ipsum dolor sit amet, eam labores nusquam periculis et, sed ancillae salutatus te, an alia unum decore vim. Quas timeam aeterno ex sea, tale solum usu id. Eu impetus officiis quo. Viderer voluptatibus an eam, possim commune eum ut, te animal suavitate
    complectitur sed. Numquam veritus delicata duo ea, vix ad dicta meliore.</div>
  <div class="item">Lorem ipsum dolor sit amet, eam labores nusquam periculis et, sed ancillae salutatus te, an alia unum decore vim. Quas timeam aeterno ex sea, tale solum usu id. Eu impetus officiis quo. Viderer voluptatibus an eam, possim commune eum ut, te animal suavitate
    complectitur sed. Numquam veritus delicata duo ea, vix ad dicta meliore.</div>
  <div class="item">Lorem ipsum dolor sit amet, eam labores nusquam periculis et, sed ancillae salutatus te, an alia unum decore vim. Quas timeam aeterno ex sea, tale solum usu id. Eu impetus officiis quo. Viderer voluptatibus an eam, possim commune eum ut, te animal suavitate
    complectitur sed. Numquam veritus delicata duo ea, vix ad dicta meliore.</div>
  <div class="item">Lorem ipsum dolor sit amet, eam labores nusquam periculis et, sed ancillae salutatus te, an alia unum decore vim. Quas timeam aeterno ex sea, tale solum usu id. Eu impetus officiis quo. Viderer voluptatibus an eam, possim commune eum ut, te animal suavitate
    complectitur sed. Numquam veritus delicata duo ea, vix ad dicta meliore.</div>
  <div class="item">Lorem ipsum dolor sit amet, eam labores nusquam periculis et, sed ancillae salutatus te, an alia unum decore vim. Quas timeam aeterno ex sea, tale solum usu id. Eu impetus officiis quo. Viderer voluptatibus an eam, possim commune eum ut, te animal suavitate
    complectitur sed. Numquam veritus delicata duo ea, vix ad dicta meliore.</div>
  <div class="item">Lorem ipsum dolor sit amet, eam labores nusquam periculis et, sed ancillae salutatus te, an alia unum decore vim. Quas timeam aeterno ex sea, tale solum usu id. Eu impetus officiis quo. Viderer voluptatibus an eam, possim commune eum ut, te animal suavitate
    complectitur sed. Numquam veritus delicata duo ea, vix ad dicta meliore.</div>
</div>

＆＃13;

Answer 3

你会很高兴找到这个解决方案。酷！

body {
    background: pink;
    margin: 0px;
    padding: 0px;
}
.containers {
    float: left;
    width: 100%;
    box-sizing: border-box;
    padding: 1.5em 1.5em 0;
}
.item {   
    float: left;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.1);
    padding: 1.5em;
    margin-bottom: 1.5em;
    border: 0.5em solid rgba(0, 0, 0, 0.4);
}

<div class="containers">
    <div class="item">Lorem ipsum dolor sit amet, eam labores nusquam periculis et, sed ancillae salutatus te, an alia unum decore vim. Quas timeam aeterno ex sea, tale solum usu id. Eu impetus officiis quo. Viderer voluptatibus an eam, possim commune eum ut, te animal suavitate complectitur sed. Numquam veritus delicata duo ea, vix ad dicta meliore.</div>
    <div class="item">Lorem ipsum dolor sit amet, eam labores nusquam periculis et, sed ancillae salutatus te, an alia unum decore vim. Quas timeam aeterno ex sea, tale solum usu id. Eu impetus officiis quo. Viderer voluptatibus an eam, possim commune eum ut, te animal suavitate complectitur sed. Numquam veritus delicata duo ea, vix ad dicta meliore.</div>
    <div class="item">Lorem ipsum dolor sit amet, eam labores nusquam periculis et, sed ancillae salutatus te, an alia unum decore vim. Quas timeam aeterno ex sea, tale solum usu id. Eu impetus officiis quo. Viderer voluptatibus an eam, possim commune eum ut, te animal suavitate complectitur sed. Numquam veritus delicata duo ea, vix ad dicta meliore.</div>
    <div class="item">Lorem ipsum dolor sit amet, eam labores nusquam periculis et, sed ancillae salutatus te, an alia unum decore vim. Quas timeam aeterno ex sea, tale solum usu id. Eu impetus officiis quo. Viderer voluptatibus an eam, possim commune eum ut, te animal suavitate complectitur sed. Numquam veritus delicata duo ea, vix ad dicta meliore.</div>
    <div class="item">Lorem ipsum dolor sit amet, eam labores nusquam periculis et, sed ancillae salutatus te, an alia unum decore vim. Quas timeam aeterno ex sea, tale solum usu id. Eu impetus officiis quo. Viderer voluptatibus an eam, possim commune eum ut, te animal suavitate complectitur sed. Numquam veritus delicata duo ea, vix ad dicta meliore.</div>
    <div class="item">Lorem ipsum dolor sit amet, eam labores nusquam periculis et, sed ancillae salutatus te, an alia unum decore vim. Quas timeam aeterno ex sea, tale solum usu id. Eu impetus officiis quo. Viderer voluptatibus an eam, possim commune eum ut, te animal suavitate complectitur sed. Numquam veritus delicata duo ea, vix ad dicta meliore.</div>
    <div class="item">Lorem ipsum dolor sit amet, eam labores nusquam periculis et, sed ancillae salutatus te, an alia unum decore vim. Quas timeam aeterno ex sea, tale solum usu id. Eu impetus officiis quo. Viderer voluptatibus an eam, possim commune eum ut, te animal suavitate complectitur sed. Numquam veritus delicata duo ea, vix ad dicta meliore.</div>
</div>

点击此处查找工作jsfiddle

Answer 4

如果不使用额外的div层，我可以获得相同的结果吗？

是的，但有一些技巧。以像素而不是ems形成填充和边距，以允许像素完美定位。此外，您需要一点calc的宽度来排除额外的边距并更改奇数编号的div上的边距以便整齐地对齐它们。这将为您提供所有div之间以及父级之间的相等间距。

Demo Snippet 1：

＆＃13;

* { box-sizing: border-box; padding: 0; margin: 0; }
.container {
    width: 80%; margin: 8px auto; padding: 16px 16px 0px 16px;
    background-color: pink; overflow: hidden;
}
.item {
    width: calc(50% - 8px); float: left; padding: 16px; 
    margin-bottom: 16px;
    background: rgba(0, 0, 0, 0.1);
    border: 8px solid rgba(0, 0, 0, 0.4);
}
.container > div:nth-child(odd) { margin-right: 16px; }

@media screen and (max-width: 520px) {
    .item { width: 100%; }
}

＆＃13;

<div class='container'>
    <div class='item'>
        Lorem ipsum dolor sit amet, eam labores nusquam periculis et, sed ancillae salutatus te, an alia unum decore vim. Quas timeam aeterno ex sea, tale solum usu id. Eu impetus officiis quo.
    </div>
    <div class='item'>
        Lorem ipsum dolor sit amet, eam labores nusquam periculis et, sed ancillae salutatus te, an alia unum decore vim. Quas timeam aeterno ex sea, tale solum usu id. Eu impetus officiis quo.
    </div>
    <div class='item'>
        Lorem ipsum dolor sit amet, eam labores nusquam periculis et, sed ancillae salutatus te, an alia unum decore vim. Quas timeam aeterno ex sea, tale solum usu id. Eu impetus officiis quo.
    </div>
    <div class='item'>
        Lorem ipsum dolor sit amet, eam labores nusquam periculis et, sed ancillae salutatus te, an alia unum decore vim. Quas timeam aeterno ex sea, tale solum usu id. Eu impetus officiis quo.
    </div>
    <div class='item'>
        Lorem ipsum dolor sit amet, eam labores nusquam periculis et, sed ancillae salutatus te, an alia unum decore vim. Quas timeam aeterno ex sea, tale solum usu id. Eu impetus officiis quo.
    </div>
    <div class='item'>
        Lorem ipsum dolor sit amet, eam labores nusquam periculis et, sed ancillae salutatus te, an alia unum decore vim. Quas timeam aeterno ex sea, tale solum usu id. Eu impetus officiis quo.
    </div>    
</div>

＆＃13;

演示小提琴1：http://jsfiddle.net/abhitalks/76swyuLf/

我应该看看flexbox吗？

是。灵活布局将使您更容易。这里的诀窍是使用justify-content: space-around;来允许div之间以及容器内部周围的空间相等。

Demo Snippet 2：

＆＃13;

* { box-sizing: border-box; padding: 0; margin: 0; }
.container {
    width: 80%; margin: 8px auto; padding: 0.5em; background-color: pink; 
    display: flex; flex-direction: row; flex-wrap: wrap;
    justify-content: space-around;
}
.item {
    flex: 1 1 40%;
    padding: 1.5em; margin: 0.5em;
    background: rgba(0, 0, 0, 0.1);
    border: 0.5em solid rgba(0, 0, 0, 0.4);
}
@media screen and (max-width: 520px) {
    .item { flex-basis: 100%; }
}

＆＃13;

<div class='container'>
    <div class='item'>
        Lorem ipsum dolor sit amet, eam labores nusquam periculis et, sed ancillae salutatus te, an alia unum decore vim. Quas timeam aeterno ex sea, tale solum usu id. Eu impetus officiis quo.
    </div>
    <div class='item'>
        Lorem ipsum dolor sit amet, eam labores nusquam periculis et, sed ancillae salutatus te, an alia unum decore vim. Quas timeam aeterno ex sea, tale solum usu id. Eu impetus officiis quo.
    </div>
    <div class='item'>
        Lorem ipsum dolor sit amet, eam labores nusquam periculis et, sed ancillae salutatus te, an alia unum decore vim. Quas timeam aeterno ex sea, tale solum usu id. Eu impetus officiis quo.
    </div>
    <div class='item'>
        Lorem ipsum dolor sit amet, eam labores nusquam periculis et, sed ancillae salutatus te, an alia unum decore vim. Quas timeam aeterno ex sea, tale solum usu id. Eu impetus officiis quo.
    </div>
    <div class='item'>
        Lorem ipsum dolor sit amet, eam labores nusquam periculis et, sed ancillae salutatus te, an alia unum decore vim. Quas timeam aeterno ex sea, tale solum usu id. Eu impetus officiis quo.
    </div>
    <div class='item'>
        Lorem ipsum dolor sit amet, eam labores nusquam periculis et, sed ancillae salutatus te, an alia unum decore vim. Quas timeam aeterno ex sea, tale solum usu id. Eu impetus officiis quo.
    </div>    
</div>

＆＃13;

演示小提琴2：http://jsfiddle.net/abhitalks/8end4o6d/

响应式布局，带边框/背景颜色的div，等间距

4 个答案: