将img放在两个div的边框上

时间:2018-06-26 21:23:12

标签: html css

我想将徽标放在两个div的边框上。我有两个问题:

  1. 我应该在哪个div中放置此徽标:在上方的div中还是在下方的div中,或者可以放在另一个div中?

  2. 如何定位。我尝试了绝对和相对,但不起作用。

它应该看起来像: enter image description here

HTML

<!-- Favorites -->
    <section class="favorites">
        <h2 class="favorites-header">Urban Favorites</h2>
        <div class="favorites-box">
            <img src="img/burger-craft-burgers-e1497746930767.png">
               <div class="favorites-info">
                <h2>Craft Your Own Burger</h2>
                <p>Always get exactly what you want with this build-your-own classic. Always get exactly what you want with this build-your-own classic.</p>
               </div>
        </div>
        <div class="favorites-box-last">
            <img src="img/burger-craft-fries.jpg">
            <div class="favorites-info">
            <h2>Loaded Cheese Fries</h2>
            <p>Always get exactly what you want with this build-your-own classic. Always get exactly what you want with this build-your-own classic.</p>
            </div>
        </div>
        <!-- Here is my logo --> <img class="favorites-logo" src="img/urban8-logo-shadow.png" alt="logo-shadow">
    </section>

    <!-- Review -->
    <section class="review">
        <div class="review-element">
            <p>"Great meals!"</p>
            <img src="img/five-stars.png">
            <p>-Jane Doe</p>
        </div>
        <div class="review-element">
            <p>"Awesome atmosphere!"</p>
            <img src="img/five-stars.png">
            <p>-Aicia Fox</p>
        </div>
        <div class="review-element">
            <p>"Everything is ok"</p>
            <img src="img/five-stars.png">
            <p>-Cesar Algir</p>
        </div>
        <button>Leave a Review</button>
    </section>

0 个答案:

没有答案