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>

Answer 1

在你的情况下，在按钮上添加负边距应该足够了。

＆＃13;

*{
  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;
}

＆＃13;

<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>

＆＃13;

Answer 2

使用display: inline-block到你的div [{1}}：

您也可以将.d设置为margin-right

＆＃13;

span

＆＃13;

*{
  box-sizing: border-box;
}

body{
  margin:0;
  padding:0;
  text-align: center;
}

.container{
  width:100%;
}

.d{
  display: inline-block;

  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{
  margin-right: 6px;
  color:#fff;
  height: 100%;
  background-color: #55862d;
  padding:7px 7px 7px 7px;
  float:right;
  clear: both;
}

＆＃13;

Answer 3

*{
  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;
  margin-bottom: 5px;
}


#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{
  height: 100%;
  /* padding:7px; */
  padding: 1px 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>

Answer 4

您可以使用flex创建它。不需要浮动。

更新这些样式

*{
  box-sizing: border-box;
}

body{
  margin:0;
  padding:0;
  text-align: center;
}

.container{
  width:100%;
}

.bButton{
  color:#fff;
  height: 100%;
  background-color: #55862d;
  padding:7px 7px 7px 7px;
  margin-left: auto;
}
.d {
  font-weight:bold;
  padding:7px 0px 7px 7px;
  font-size: 1em;
  color: #55862d;
  border: 1px solid #6f6b68;
  width:100%;
  display: flex;     
}



#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;
}

＆＃13;

  <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>

＆＃13;

sliderInput

＆＃13;

如何在Div中排列此文本和按钮？

4 个答案: