無法獲取「格」漂浮正確

enter image description here 無法獲取「格」漂浮正確

我無法設置我的CSS正確地顯示我的網頁。我想讓「飲料」圖標保持在左側，但是我想將整塊飲料圖像上移到「飲料」圖標的右側。

我嘗試將飲料圖標向左側漂浮，然後將飲料圖像塊向左側漂浮，但它顯然不起作用。

HTML：

 <div id="drink_section"> 

      <img src="/{{MEDIA_URL}}images/images/drinks_order_title.png" alt="" id="drinks_order_title" />     

      <div id="drink_menu"> 
       {% for item in drink %} 
        <div id="drink_set"> 
         <img src="{{item.photo_menu.url}}" alt="" id="drink_photo" /> 
         <img src="/{{MEDIA_URL}}images/images/drinks_title_overlay.png" alt="" id="drinks_title_overlay" />     
         <p id="drink_name">{{item.name}}</p> 
         <p id="drink_price">${{item.price}}</p> 

         <div id="drink_footer"> 
          <a id ="drink_order_button" href="{{item.slug}}"></a> 
         </div><!-- end drink_footer--> 

        </div><!-- end drink_set--> 
       {% endfor %} 
      </div><!-- end drink_menu--> 

     </div><!-- end drink_section-->

CSS

#drink_section{ 
    width:755px; 
    float:left; 

} 

#drink_menu{ 
    float:left; 
} 

#drink_title{ 
    float:left; 
    width:128px; 
} 

#drink_set{ 
    float:left; 
    width:137px; 
}

來源

2012-09-10 anc1revv

WHICH整個飲料圖像塊權，其中「飲料」圖標。?? – Dipak

Demo

嗨，現在你可以改變你的代碼，並使用ul li列表項的這種設計

因爲這樣

HTML

<ul class="ordr"> 
    <li> 
    <img src="http://www.gravatar.com/avatar/772707aec2cb2ce7b372deb2d4e06b51?s=32&d=identicon&r=PG" alt=""> 
    <p>price tag</p> 
    <a href="#">price tag</a> 
    </li> 
<li> 
    <img src="http://www.gravatar.com/avatar/772707aec2cb2ce7b372deb2d4e06b51?s=32&d=identicon&r=PG" alt=""> 
    <p>price tag</p> 
    <a href="#">price tag</a> 
    </li> 
    <li> 
    <img src="http://www.gravatar.com/avatar/772707aec2cb2ce7b372deb2d4e06b51?s=32&d=identicon&r=PG" alt=""> 
    <p>price tag</p> 
    <a href="#">price tag</a> 
    </li> 
    <li> 
    <img src="http://www.gravatar.com/avatar/772707aec2cb2ce7b372deb2d4e06b51?s=32&d=identicon&r=PG" alt=""> 
    <p>price tag</p> 
    <a href="#">price tag</a> 
    </li> 
     <li> 
    <img src="http://www.gravatar.com/avatar/772707aec2cb2ce7b372deb2d4e06b51?s=32&d=identicon&r=PG" alt=""> 
    <p>price tag</p> 
    <a href="#">price tag</a> 
    </li> 
     <li> 
    <img src="http://www.gravatar.com/avatar/772707aec2cb2ce7b372deb2d4e06b51?s=32&d=identicon&r=PG" alt=""> 
    <p>price tag</p> 
    <a href="#">price tag</a> 
    </li> 
      <li> 
    <img src="http://www.gravatar.com/avatar/772707aec2cb2ce7b372deb2d4e06b51?s=32&d=identicon&r=PG" alt=""> 
    <p>price tag</p> 
    <a href="#">price tag</a> 
    </li> 

</ul>

CSS

.ordr{ 
    list-style:none;} 
.ordr li{ 
float:left; 
    background:red; 
    width:100px; 
    margin-left:1px; 
    position:relative; 
} 
.ordr li img{ 
    width:100%; 
    border:solid 1px black;} 

.ordr li p{ 
position:absolute; 
    left:0; 
    top:66px; 
    text-align:center; 
    color:#fff; 
    right:0; 
    background:rgba(0,0,0,0.5) 
}

Live demo

來源

2012-09-10 06:42:43

使用火狐添加一個Firefox，它會在這些問題上幫助你太多。 – NoNaMe

將以下內容添加到圖像部分。

float:right;

來源

2012-09-10 06:44:48 jeeva

儘量使#drink_set寬100px的，我認爲它會幫助你

#drink_set{ 
    float:left; 
    width:100px; 
}

來源

2012-09-10 06:46:43 xurca

#drink_section{ 
     width:755px; 
     float:left; 
     **display:inline-block;** 

    } 

    #drink_menu{ 
     float:left; 
    } 

    #drink_title{ 
     float:left; 
     width:128px; 
    } 

    #drink_set{ 
     float:left; 
     **width:400px;** /* more width than current */ 
    }

來源

2012-09-10 06:57:27 user1542653

無法獲取「格」漂浮正確

回答

相關問題