Question

我是css的新手并写了这个HTML代码：

<div class="col-1">A</div>
        <div class="col-1">B</div>
        <div class="col-1">C</div>
        <div class="col-1">D</div>
        <div class="col-1">E</div>
        <div class="col-1">F</div>
        <div class="col-1">G</div>
        <div class="col-1">H</div>
        <div class="col-1">I</div>
        <div class="col-1">J</div>
        <div class="col-1">K</div>
        <div class="col-1">L</div>

这是我的css：

.col-1 {
            width: 58px;
            background-color: chocolate;
        }

为此输出写出代码：
CLICK TO SHOW

但我的结果是：
THIS LINK

我该如何解决这个问题？谢谢。

Answer 1

您只需向margin: 1px;元素添加一个保证金col-1，如下所示：

.col-1 {
  width: 58px;
  background-color: chocolate;
  margin: 1px;
  /*I just added this to make them inline */
  display: inline-block;
}

<div class="col-1">A</div>
<div class="col-1">B</div>
<div class="col-1">C</div>
<div class="col-1">D</div>
<div class="col-1">E</div>
<div class="col-1">F</div>
<div class="col-1">G</div>
<div class="col-1">H</div>
<div class="col-1">I</div>
<div class="col-1">J</div>
<div class="col-1">K</div>
<div class="col-1">L</div>

它会为您提供预期的结果，请注意您可以使用想要的像素进行编辑。

Answer 2

我建议使用新的flexbox布局。浏览器支持已经相当不错（http://caniuse.com/#feat=flexbox），如果需要，您可以添加一些供应商前缀。

＆＃13;

.col-wrapper {
  display: flex;
}

.col-1 {
  width: 58px;
  background-color: chocolate;
  margin: 0px 6px;
}

＆＃13;

<div class="col-wrapper">
  <div class="col-1">A</div>
  <div class="col-1">B</div>
  <div class="col-1">C</div>
  <div class="col-1">D</div>
  <div class="col-1">E</div>
  <div class="col-1">F</div>
  <div class="col-1">G</div>
  <div class="col-1">H</div>
  <div class="col-1">I</div>
  <div class="col-1">J</div>
  <div class="col-1">K</div>
  <div class="col-1">L</div>
</div>

＆＃13;

如何在响应div之间设置空间？

2 个答案: