用两个文本框构造左浮动图像

Question

在格式化这个网站时遇到一些问题（只是学习html css！）

我无法解决的问题：

1）顶部图像居中但其余部分保持

2）图片图标尺寸太大并将文字推到底层

3）底部的文字不会开始新的一行

网站是yodega.com/sell

＆＃13;

＆＃13;

html, body, h1, h2, h3, h4, ul, ol, li, p, a {
  padding: 0;
  border: 0;
  margin: 0;
}
h1 {
  color: #FAD48B;
  margin: 15px 0 15px;
  text-align: left;
}
h2 {
  color: #FAD48B;
  margin: 20px 0 5px 0;
  padding: 2px;
   
}
h3 {
  color: #FAD48B;
  margin: 10px 0 10px 0;
    font-size: 12px;
    
}


//removes top nav
.nav{
    display: none;
}
//attepmt to fix header to top
.header{
    position: fixed;
}

.benefit-icon img{
    max-width: 100%;
    height: auto;
}

.benefit-icon{
    top-margin:5px;
    width:20%;
    height:125px;
    margin-bottom:10px;
    float:left;
}

.benefit-title{
    width:80%;
    height:35px;
    float:left;
    margin-bottom:5px;
    font-size:25px;
    font-decoration:bold;
}

.intro-space{
    bottom-margin:10px;
    float:left;
}

.benefit-detail{
    width:80%;
    height:25px;
    float:left;
    margin-bottom:70px;
    font-size:15px;
}

.sell-title{
    margin-bottom:10px;
    font-size:55px;
    padding-bottom:40px;
    font-family: sans-serif;
    font-weight:bold;
    line-height: 55px;
}

.astericks{
    margin-top:5px;
}

@media screen and (max-width: 692pxpx)   {
    .main, .small{
        width:100%;   
        float:none;
    }
    
}

＆＃13;

<div class="sell-title">Sell with Yodega</div>

<div class="intro-space"> </div>

<div class="benefit-icon"></div>
<img src="/images/blankClock.png">
<div class="benefit-title blue">
<div class="benefit-title blue">Fast &amp; Easy Set Up – Start Selling Today</div>
</div>
<div class="benefit-detail purple">
<div class="benefit-detail purple">store complete in 10 minutes with no programming required</div>
</div>

<div class="benefit-icon"></div>
<img src="/images/blankClock.png">
<div class="benefit-title blue">
<div class="benefit-title blue">Zero Set Up Cost: free Store &amp; Listings</div>
</div>
<div class="benefit-detail purple">
<div class="benefit-detail purple">keep more of your money – only very small selling fees*</div>
</div>
<div class="benefit-icon"></div>
<img src="/images/blankClock.png">
<div class="benefit-title orange">Your Own Personal Store – Custom URL &amp; Store</div>
<div class="benefit-detail green">your own store page with direct web link</div>
<div class="benefit-icon"></div>
<img src="/images/blankClock.png">
<div class="benefit-title blue">No fee for store or listings</div>
<div class="benefit-detail purple">only small 4.9% + typical credit card processing</div>
<div class="benefit-icon"></div>
<img src="/images/blankClock.png">
<div class="benefit-title orange">Hassle-free selling</div>
<div class="benefit-detail green">Yodega takes care of everything – you just sell and ship</div>
<div class="benefit-icon"></div>
<img src="/images/blankClock.png">
<div class="benefit-title blue">Reduce your fee rate with referrals</div>
<div class="benefit-detail purple">eeach seller you refer*permanently* reduces your fee rate**</div>
<div class="benefit-icon"></div>
<img src="/images/blankClock.png">
<div class="benefit-title blue">Seller Dashboard Makes Managing Easy</div>
<div class="benefit-detail purple">customized sales reports and orders page</div>
<div></div>
<div></div>
<div>

<div class="astericks">*4.9% + typical credit card processing fees
**A vaild referral requires a recommendation within 1 month of referral store opening. Store must sell $300 of sales before referral rate reduction activates. Maximium .9% in reduction from standard fee rate from referral incentives.</div>

＆＃13;

＆＃13;

＆＃13;

谢谢！

Answer 1

好的，有很多事情可以改变。

一个人会删除＆＃34; p＆＃34;标记来自您的图像并将它们放在benefit-icon div中。

另一个删除高度，并播放文本div的边距，并在每个组后添加一个或全部清除。

您可以轻松解决许多这些问题，只需查看您的代码结构即可。你的img应该在它的包装中而不是段落标记。

这些可能不是处理问题的正确方法，请务必对基本网站格式进行一些研究。