Question

下面是代码，我有一个图像，在该图像下方有一个价格和一个按钮，我要在价格和按钮之间留一些空间，应该在图像的左侧和右侧

.new {
  font: bold 11px Arial;
  text-decoration: none;
  background-color: #66C4C4;
  color: white;
  padding: 2px 6px 2px 6px;
  border-top: 1px solid #CCCCCC;
  border-right: 1px solid #333333;
  border-bottom: 1px solid #333333;
  border-left: 1px solid #CCCCCC;
.wrapper {
                text-align: center;
            }

.show{
                background-color: #2D318A;
                color: white;
                padding: 2px 6px 2px 6px;
  border-top: 1px solid #CCCCCC;
  border-right: 1px solid #333333;
  border-bottom: 1px solid #333333;
  border-left: 1px solid #CCCCCC;
                border-radius: 3px;
                text-decoration: none;
               float: right;

<div class="wrapper">
        <a href="#" class="new">New Released</a>
        </div> 
        <img src="https://www.google.com.np/search?q=django+imagefield&source=lnms&tbm=isch&sa=X&ved=0ahUKEwiHk57k89fcAhUJVH0KHbxAC08Q_AUICygC&biw=1396&bih=690#imgrc=3ukNSrarUo82hM:" style="width: 300px" height="200px">
<table>
            <tr>
                <td>
                    Price: Rs 14000
                                  
                </td>
                <td> <a href="#" class="show">Join Now</a></td>
            </tr>
            
        </table>

Answer 1

使用这种方法可以正常工作。最好的部分是您甚至可以通过类调整其响应能力。不需要使用表进行此类操作。那被认为是错误的代码。

您缺少.new类的右括号。

    .new {
  font: bold 11px Arial;
  text-decoration: none;
  background-color: #66C4C4;
  color: white;
  padding: 2px 6px 2px 6px;
  border-top: 1px solid #CCCCCC;
  border-right: 1px solid #333333;
  border-bottom: 1px solid #333333;
  border-left: 1px solid #CCCCCC;
  }
  .image-container {
    width: 300px;
    height: 200px;
  }
  .image-container img {
    width: 100%;
  }
  .image-container span {
    float: left;
  }
  .show {
    float: right;
    background-color: #2D318A;
    color: white;
    padding: 2px 6px 2px 6px;
    border-top: 1px solid #CCCCCC;
    border-right: 1px solid #333333;
    border-bottom: 1px solid #333333;
    border-left: 1px solid #CCCCCC;
    border-radius: 3px;
    text-decoration: none;

<div class="wrapper">
  <a href="#" class="new">New Released</a>
</div>
<div class="image-container">
  <img src="http://site8.dealerbase.co.nz/media/1707/300x200.gif" />
  <br>
  <span>Price: Rs 14000</span>
  <a href="#" class="show">Join Now</a></div>

谢谢

Answer 2

.item-wrap{
  display:inline-block;
  border:1px solid #ccc;
}
.item-footer{
  display:flex;
  justify-content:space-around;
}

<div class="item-wrap">
  <div class='item-img'>
    <img src='https://picsum.photos/300/200?image=0'>
    </div>
  <div class='item-footer'>
    <div class='price'><p>Price: Rs 14000</p></div>
    <div class='item-join'>
      <p>Join Now</p>
      </div>
    </div>
  </div>

Answer 3

**HTML:**
<tr>
    <td>
        Price: Rs 14000                      
    </td>
    <td class="joinButtonAlign"> <a href="#" class="show">Join Now</a></td>
</tr>


**CSS**

.joinButtonAlign{
  display: inline-block;
  padding-left:30px;
}

在文本和按钮之间需要一些空间

3 个答案: