css - 如何在 Div 内排列此文本和按钮？

Question

我正在尝试创建堆叠的这 4 个 div。这种布局实际上是循环中 JQuery 迭代的结果。

我对这是如何完成的并不挑剔，但我正在尝试获取按钮或链接，或者在这种情况下跨度显示在每个 div 的右侧，然后是左侧的文本。

我认为填充正在将它们放下，但我不确定如何让它们全部排列？

我感谢任何帮助？

*{
  box-sizing: border-box;
}

body{
  margin:0;
  padding:0;
  text-align: center;
}

.container{
  width:100%;
}

.d{
  font-weight:bold;
  padding:7px 0px 7px 7px;
  font-size: em1;
  color: #55862d;
  border: 1px solid #6f6b68;
  width:100%;
  text-align: left;
  clear: both;
}


#dContainer{
  width:100%;
  padding-top:10px;
}

.dHeader{
  text-align: left;
  padding:1px 0px 1px 10px;
  max-width: 400px;
  margin: auto;
}

#dResults{
  padding-top: 5px 5px 5px 5px;
  max-width: 400px;
  margin: auto;
}

.bButton{
  color:#fff;
  height: 100%;
  background-color: #55862d;
  padding:7px 7px 7px 7px;
  float:right;
  clear: both;
}

  <section id="dContainer">
  <div class="dHeader">Title</div>
  <div id="dResults">
    <div class="d">something A<span class="bButton">Click!</span></div>
    <div class="d">something b<span class="bButton">Click!</span></div>
    <div class="d">something c<span class="bButton">Click!</span></div>
    <div class="d">something d<span class="bButton">Click!</span></div>
  </div>
  </section>

标签： csshtml

Answer 1

在您的情况下，为按钮添加负边距顶部就足够了。

*{
  box-sizing: border-box;
}

body{
  margin:0;
  padding:0;
  text-align: center;
}

.container{
  width:100%;
}

.d{
  font-weight:bold;
  padding:7px 0px 7px 7px;
  font-size: em1;
  color: #55862d;
  border: 1px solid #6f6b68;
  width:100%;
  text-align: left;
  clear: both;
}


#dContainer{
  width:100%;
  padding-top:10px;
}

.dHeader{
  text-align: left;
  padding:1px 0px 1px 10px;
  max-width: 400px;
  margin: auto;
}

#dResults{
  padding-top: 5px 5px 5px 5px;
  max-width: 400px;
  margin: auto;
}

.bButton{
  color:#fff;
  height: 100%;
  background-color: #55862d;
  padding:8px 7px 7px 7px;
  float:right;
  clear: both;
  margin-top: -7px;
}

<section id="dContainer">
  <div class="dHeader">Title</div>
  <div id="dResults">
    <div class="d">something A<span class="bButton">Click!</span></div>
    <div class="d">something b<span class="bButton">Click!</span></div>
    <div class="d">something c<span class="bButton">Click!</span></div>
    <div class="d">something d<span class="bButton">Click!</span></div>
  </div>
  </section>