漂浮在图像旁边的块中的按钮

Question

我是初学者，希望得到一些帮助，看看我犯了哪个错误。 我想这样的最后一个按钮名为＆＃34; Dealer＆＃34;和＃34;私人派对＆＃34;漂浮在图片左侧的iPhone图片旁边。 提前致谢

HTML：

  <div class="recent-trade-img" style="margin:10px 0 0 0">
  <input class="sell-type" value="Dealer" type="button"><input class="sell-type" value="Private Party" type="button">
  <a href="prices_iPhone_2G_16GB_ATT.html"><img src="images/specs_iPhone_2G.jpg" width="186" height="182" alt=""/></a>
  </div>
  <div class="name">
  <a href="prices_iPhone_2G_16GB_ATT.html">iPhone 2G<br> 16GB AT&amp;T</a>
  </div>

CSS：

.sell-type  { 
background-color: #ffffff;
border: 1px solid #ccc;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset;
color: #0564BC;
/*text-shadow: 0 1px 0 rgba(0, 0, 0, 0.8), 0 1px 2px rgba(0, 0, 0, 0.2);*/
border-radius: 4px 4px 4px 4px;
cursor: pointer;
font-weight: bold;
padding: 5px 0;
/*width:130px;
height:58px;*/
width:100px;
height:48px;
margin: 4px;
font-size: 14px;
background-size:70% !important;

}

.sell-type:hover  {
border-color: #0564BC;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 3px rgba(0, 0, 0, 0.1);
color: #36658f;
}

Answer 1

以下代码可根据您的需要进行修改

HTML：

<div class="supreme container">
  <img src="the iphone.jpg" class="i-image">

  <div class="sub_container">
    <div class="button_deal">dealer</div
    <div class="button_private_party">private party</div>
  </div>

</div>

CSS

.supreme container{
display:inline-block
}

.i-image{
float:left;
display:block;
width:150px;
height:150px;
}

.sub_container{
float:left;
display:block
}

Answer 2

你要做的是将2个按钮放在div中，将图像放在自己的div中

<Div class="dealer_priv_btn">
 Butons come here....
</div>

<div class="the_image">
   Image tag comes here...
</div>

对于这两个类，你的css现在应该是这样的

.dealer_priv_btn{float:left; width:100px; height:100px;}
.the_image{float:left; width:100px; height:100px;}

请声明您自己的尺寸I.e宽度和高度..使用该代码播放使其适合您..

GOoDLucK：）