1

在此处输入图像描述

我无法设置我的 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;
}
4

4 回答 4

2 
  #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-10T06:57:27.047 回答
1

演示

您好，现在您可以更改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)
}

现场演示

于 2012-09-10T06:42:43.807 回答
1

将以下内容提供给图像部分。

float:right;
于 2012-09-10T06:44:48.850 回答
1

尝试使 #drink_set宽度为 100 像素，我认为它会对您有所帮助

#drink_set{
    float:left;
    width:100px;
}
于 2012-09-10T06:46:43.637 回答