Question

我正在尝试设置html片段的样式

<div class="itemDisplay">
    <div class="itemLables"> Item Number :</div>
    <div class="itemData">1</div>
    <br>
    <div class="itemLables"> Item Name :</div>
    <div class="itemData">new phone</div>
    <br>
    <div class="itemLables"> Category :</div>
    <div class="itemData">phone</div>
    <br>
    <div class="itemLables"> Description:</div>
    <div class="itemData">Lorem ipsum dolor sit amet, co...</div>
    <br>
    <div class="itemLables"> Buy it now price :</div>
    <div class="itemData">44</div>
    <br>
    <div class="itemLables"> Bid price :</div>
    <div class="itemData">11</div>
    <br>Time left : 10 days, 2 hours, 35 minutes, 43 seconds<br>
<button class="bidButton" id="btnBid1" onclick="submitBid(this.id)">Place Bid</button>
<button class="buyButton" id="btnBuy1" onclick="buyItNow(this.id)">Buy it now</button>
    </div>

我正在使用的CSS是

.itemDisplay {
background-color:#BDBCBA;
margin : 10px;
margin-bottom: 10px;
border : 10px;
display: inline-block;
width : 90%;
position:relative;
}

.itemLables{
            width:200px;
            text-align:right;
            position:absolute;
            left:0;         
}

.itemData{
            text-align:left;
            position:absolute;
            left:220px;
}


.bidButton {
    background-color:#3090C7;
    width: 100px;
    height: 40px;
    margin: 10px;
}

.buyButton {
        background-color:green;
    width: 100px;
    height: 40px;
    margin: 10px;

}

我得到的输出是这个

我的问题是我们如何才能增加每一行细节之间的垂直空间。我已经尝试增加两个div类的高度，但这不起作用。我尝试过边距和填充，但这也不会增加垂直间距。

Answer 1

使用float而不是绝对定位来获得相同的输出，并在.itemLables和.itemData元素上添加padding-bottom。

.itemLables{
  clear:left;
  text-align:right;
  width:200px;
  float:left;
  padding-bottom:5px;

}

.itemData{

            text-align:left;                     
           padding-bottom:5px;
}

请参阅演示：http://jsbin.com/wiyojosaje/edit?html,output

Answer 2

这里的一个问题是您使用绝对定位来放置这些元素，这可能导致它们不尊重您正在应用的任何边距或填充。这可能会变得非常混乱，特别是对于像现在这样简单地显示一系列属性的东西。

考虑<table>

由于您希望元素间隔均匀，因此您可以考虑使用<table>元素。表格很糟糕，因为大多数人将它们与人们使用它们布置整个网站的日子联系在一起，但是它们非常适合完成目前的工作：显示表格数据。

<table>
  <tr>
    <td>Item Number :</td>
    <td>1</td>
  </tr>
  <tr>
    <td>Item Name :</td>
    <td>new phone</td>
  </tr>
  <tr>
    <td>Category :</td>
    <td>phone</td>
  </tr>
  <tr>
    <td>Description :</td>
    <td>Lorem ipsum dolor sit amet, co...</td>
  </tr>
  <tr>
    <td>Buy it now price :</td>
    <td>44</td>
  </tr>
</table>

这显然不是唯一的方法，<div>元素当然可以用来处理这个问题，但在这种情况下，表格可能更合适。通过一些小的CSS更改，您应该能够快速达到所需的效果，同时稍微清理一下代码。

示例

＆＃13;
＆＃13;
.itemDisplay { background-color: #BDBCBA; margin: 10px; margin-bottom: 10px; border: 10px; display: inline-block; width: 90%; position: relative; } /* Center your table */ .itemDisplay table { margin: 0 auto; } /* Fix your spacing in your table */ .itemDisplay table td:first-of-type { width: 200px; text-align: right; } .centered-content { text-align: center; } .bidButton { background-color: #3090C7; width: 100px; height: 40px; margin: 10px; } .buyButton { background-color: green; width: 100px; height: 40px; margin: 10px; }
＆＃13;
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Tables Ain't Evil</title> </head> <body> <div class='itemDisplay'> <table> <tr> <td>Item Number :</td> <td>1</td> </tr> <tr> <td>Item Name :</td> <td>new phone</td> </tr> <tr> <td>Category :</td> <td>phone</td> </tr> <tr> <td>Description :</td> <td>Lorem ipsum dolor sit amet, co...</td> </tr> <tr> <td>Buy it now price :</td> <td>44</td> </tr> </table> <div class='centered-content'> <br />Time left : 10 days, 2 hours, 35 minutes, 43 seconds <br /> <button class="bidButton" id="btnBid1" onclick="submitBid(this.id)">Place Bid</button> <button class="buyButton" id="btnBuy1" onclick="buyItNow(this.id)">Buy it now</button> </div> </div> </body> </html>
＆＃13;
＆＃13;
＆＃13;

Answer 3

你有

    .itemDisplay {
background-color:#BDBCBA;
margin : 10px;
margin-bottom: 10px;
border : 10px;
display: inline-block;
width : 90%;
position:relative;
}

.itemLables{
            width:200px;
            text-align:right;
            position:relative;
            float: left;
            padding-top:20px;
            left:0;         
}

.itemData{
            text-align:left;
            position:relative;
            width: calc(90% - 200px);
            padding-top:20px;
            float: left;

}

更改itemLables和itemData中的padding-top，您可以更改空间

Answer 4

这是一个使用定义列表的简化版本。

＆＃13;

.itemDisplay {
  background-color:#BDBCBA;
  margin : 10px;
  border : 10px;
  display: inline-block;
  width : 90%;
  position:relative;
  
  line-height: 1.5em;
}

dt {
  width:200px;
  text-align:right;
  display: inline-block;
}

dt:after {
  content: ' :';
}

dd {
  text-align:left;
  display: inline;
  margin-left: 10px;
}

dd:after { /* new line after the value */
  content: '\A';
  white-space: pre;
}


footer {
  text-align: center;
}

.bidButton,
.buyButton {
    background-color: #3090C7;
    width: 100px;
    height: 40px;
    margin: 10px;
}

.buyButton {
    background-color:green;
}

＆＃13;

<div class="itemDisplay">
    <dl>
      <dt>Item Number</dt>
      <dd>1</dd>

      <dt>Item Name</dt>
      <dd>new phone</dd>

      <dt>Category</dt>
      <dd>phone</dd>
      
      <dt>Description</dt>
      <dd>Lorem ipsum dolor sit amet, co...</dd>

      <dt>Buy it now price</dt>
      <dd>44</dd>

      <dt>Bid price</dt>
      <dd>11</dd>
    </dl>

    Time left : 10 days, 2 hours, 35 minutes, 43 seconds
  
  <footer>
    <button class="bidButton" id="btnBid1" onclick="submitBid(this.id)">Place Bid</button>
    <button class="buyButton" id="btnBuy1" onclick="buyItNow(this.id)">Buy it now</button>
  </footer>
  
</div>

＆＃13;

Answer 5

在div之间使用<br>不是一个好主意。我试试这个：

.itemContainer {
    margin-bottom: 50px;
}

.itemLbl {
    width: 200px;
    float: left;
    text-align: right;
}

.itemDat {
    width: 200px;
    float: left;
    text-align: left;
    padding-left: 20px;
}

然后：

<div class="itemContainer">
    <div class="itemLbl">Description:</div>
    <div class="itemDat">Lorem ipsum dolor sit amet, co...</div>
</div>

<div class="itemContainer">
    <div class="itemLbl">Description:</div>
    <div class="itemDat">Lorem ipsum dolor sit amet, co...</div>
</div>

并使用margin-bottom。

如何增加div之间的空间

5 个答案: