Html 通过CSS自定义div中的div

我正在努力实现类似的目标： ，但我遇到了一些问题

这是我来自JSFIDLE的代码：

HTML代码：

<div id ="itembox">
    <div id="itempicture">
    </div>
    <div id="iteminfo">
        Info: X
    </br>
        Current price: $
    </br>
        Time until expired: X
    </br>
        Offer avilable for more: X
    </br>
        Place: X
    </div>
    <button class="sendprice" onclick="location.href='#'">Place bid</button>
</div>

信息：X


现行价格：$


截止时间：X


提供适航更多：X


地点：X
出价

---

如果你能向我解释我做错了什么，我将非常感激

使用

display:inline flex

使您走上了错误的道路。

您根本不需要使用div来实现图像中的内容。由于您的图像不太清晰，请发布更多您想要的详细信息。还有一件事，我试图将itembox的高度恢复到290px，我希望按钮粘在按钮上，我该怎么做@匿名乐于帮助：）是的，我现在明白了，我只是复制了其他css项目的一部分，我甚至懒得看，然后我不明白发生了什么。。。

    try this:
   #itembox
    {
        margin-top:5px;
        margin-left: 3px;
        position: relative;

        border-style: solid;
        border-width: 2px;
        height:auto;
        width:230px;

        overflow:hidden;
        float:left;
    }
    #itempicture
    {
        background-image: url('');
        background-color:black;
        height:100px;
    width:100%;

    }
    #iteminfo
    {
        font-family:arial;
        font-size:14px;
      bottom: 0;
        height:auto;
        width:100%;


    }
    #itembox .sendprice
    {
        position: relative;
        height:50px;
        width:100%;
        bottom: 0;
        clear:both;
    }