Question

我在同一行的<div>周围有两个image，但是当我添加图片时，右下方会<div>。

我已尝试float，display:inline-block甚至为HTML代码设置样式，但它没有帮助。

请帮帮我。这是我的code：

  <title>Hair by Michelle</title>
<body>
<div class="all">
    <div class="navbar">

        <img class="pic1" src="https://scontent-lga1-1.xx.fbcdn.net/hphotos-xaf1/v/t1.0-9/598668_4520542180477_68371292_n.jpg?oh=024b6348716dcf01475a40d0576671e7&oe=5640E0C7" alt="Photo of Michelle>

        <h1>Hair By Michelle</h1>

        <ul>
            <li class="home"><a href="#">home</a>
            </li>
            <li class="about"><a href="#">about</a>
            </li>
            <li class="availability"><a href="http://hairbymichelle.simplybook.me/sheduler/manage/">appointments</a>
            </li>
            <li class="contact"><a href="#">contact</a>
            </li>
        </ul>
    </div>
</div>
<div class="container">
    <div class="hours">
            <h1>Hours</h1>

        <p>Tuesday: 12pm-7pm</p>
        </br>
        <p>Wednesday: 12pm-7pm</p>
        </br>
        <p>Thursday: 10am-7pm</p>
        </br>
        <p>Every other Saturday: 10am-7pm</p>
    </div>
    <div class="services">
            <h1>Services</h1>

            <h4>Women's Haircut $32</h4>

        </br>
            <h4>Men's Haircut $22</h4>

        </br>
            <h4>Full head color $50</h4>

        </br>
            <h4>Full highlights $70</h4>

        </br>
            <h4>Color toning $15</h4>

        </br>
            <h4>Facial waxing $12</h4>

    </div>
</div>

忽略结果区域，只需将其粘贴到编辑器中即可。

Answer 1

如果您希望元素在同一行中排成行，则应添加：

float:left;
position:relative;

对于HTML我会推荐div中的每个图像：

.imgrow {
  width:100px;
  height:100px;
  position:relative;
  float:left;
 }

<div class="imgrow"><img class="imgrow" src="https://scontent-lga1-1.xx.fbcdn.net/hphotos-xaf1/v/t1.0-9/598668_4520542180477_68371292_n.jpg?oh=024b6348716dcf01475a40d0576671e7&oe=5640E0C7"></div>
<div class="imgrow"><img class="imgrow" src="https://scontent-lga1-1.xx.fbcdn.net/hphotos-xaf1/v/t1.0-9/598668_4520542180477_68371292_n.jpg?oh=024b6348716dcf01475a40d0576671e7&oe=5640E0C7"></div>

Answer 2

我在你的代码中只看到一张图片...... 如果您需要在图像旁边显示文本，请尝试使用 -

<div class="navbar">
<div style="float:left;">
        <img class="pic1" src="https://scontent-lga1-1.xx.fbcdn.net/hphotos-xaf1/v/t1.0-9/598668_4520542180477_68371292_n.jpg?oh=024b6348716dcf01475a40d0576671e7&oe=5640E0C7" alt="Photo of Michelle">
</div>
<div style="float:right;">
        <h1>Hair By Michelle</h1>

        <ul>
            <li class="home"><a href="#">home</a>
        </li>
        <li class="about"><a href="#">about</a>
        </li>
        <li class="availability"><a href="http://hairbymichelle.simplybook.me/sheduler/manage/">appointments</a>
        </li>
        <li class="contact"><a href="#">contact</a>
        </li>
    </ul>
    </div>
</div>

如何在一行中用两个<div> s包围图像？

2 个答案: