为每个框添加一个按钮

Question

我不确定应该如何解决这个问题。 我对前端开发相当新，所以请耐心等待。 我有4个方框一步一步解释这个过程。我成功了 使用inline-block属性并排显示它们。现在，我正在尝试在盒子顶部添加4个小盒子外观按钮。这就是我的意思。

这是index.html代码。

  <section>
      <div class="how-text">
        <h3>How to use SnappyApp</h3> 
      </div>


      <div class="how-box">
        <div class="idea-top">

        </div>
        <div class="idea">

        </div>

        <div class="scatch">

        </div>
        <div class="craft">

        </div>
        <div class="launch">

        </div>
      </div>
    </section>

这是css代码。

section {
  height: auto;
  padding-bottom: 100px;
  background-color: #2c3e50;
}

.how-text {
  text-align: center;
  display: inline-block;
  width: 100%;
  color: white;
  margin-top: 40px;
  font-size: 30px;
  letter-spacing: 3px;
}

.how-box {
  text-align: center;
  height: auto;
  margin-top: 130px;
}

.idea {
  background: url('img/idea.svg') center center no-repeat;
  width: 200px;
  height: 200px;
  display: inline-block;
  margin-right: 25px;
  border: white solid medium;
}

.scatch {
  background: url('img/scatch.svg') center center no-repeat;
  width: 200px;
  height: 200px;
  display: inline-block;
  margin-right: 25px;
  border: white solid medium;
}

.craft {
  background: url('img/craft.svg') center center no-repeat;
  width: 200px;
  height: 200px;
  display: inline-block;
  margin-right: 25px;
  border: white solid medium;
}

.launch {
  background: url('img/launch.svg') center center no-repeat;
  width: 200px;
  height: 200px;
  display: inline-block;
  margin-right: 25px;
  border: white solid medium;
}

我也觉得我的css代码非常重复。如果您有任何建议，请帮忙！我非常感谢你的帮助。

谢谢。

Answer 1

这里

https://jsfiddle.net/ds0md0xc/1/

<强>说明

您需要做的就是在这些div中嵌套子元素。因为您将它们指定为按钮。我用了

<button>

元素。但如果你愿意，可以随意将它改成div。

 <div>
    <button> </button>
 </div>

对于CSS。相应地设置宽度和高度将非常简单，它将自己定位到顶部。

button{
      width:100%;
      height: //whateveryouwant;
}

对于边界，你不需要第二个div。只需将按钮的边框底部设置为小提琴 希望这有帮助

Answer 2

here's a fiddle演示

你应该有一个＆＃39;容器＆＃39; div作为父母，并将两个盒子作为孩子：

<div class='super-box'>
 <div class='button'> </div>
 <div class='picture-box'> </div>
</div>

就重复代码而言，任何重复几次（比如说3次）的东西都会将它放在一个单独的类中，并将多个类应用于由空格分隔的每个div

<div class='firstClass secondClass'></div>

Answer 3

重复你的div叫做how-box。这是一个指向小提琴的链接，显示：http://jsfiddle.net/eofct5ur/

也可以通过这样的方式清理你的css：

.idea, .scatch, .craft {
  width: 200px;
  height: 200px;
  display: inline-block;
  margin-right: 25px;
  border: white solid medium;
}

然后你会这样做：     .idea {     背景：网址（＆＃39; http://www.example.com/images/1.png＆＃39;）;     } 等等其他div。

Answer 4

您可以将按钮和方框包装在1 div中。 以这种方式，它们将在另一个下面显示（设置宽度：100％）。

所以现在你有4个div，每个div都在一个按钮内，另一个div。

如果您在前4个div上执行了内联块，它们将彼此相邻，并且在您内部有按钮和文本。

问候