Question

我正在尝试使div坐在图片的左侧。这是一项任务，因此有些事情我无法更改，例如字体大小等。我尝试过浮动它，显示内联和内联块，但是这些都不起作用。有人可以在这里看到我在做什么吗？

样式表：

 {
    margin: 1em 0;
    font-size: 1.3em;
    display: table;
}
.row {
    display: table-row;
}
.row div {
    padding: 0.25em 05em;
    display: table-cell;
}
.day {
    font-weight: bold;
}

这是html代码：

<article>
            <figure id="contentstart">
               <img src="images/cone.jpg" height="301" width="200" alt="a monarch butterfly on a purple coneflower">
               <figcaption>Purple Coneflower</figcaption>
            </figure>
            <h2>Hours</h2>
              <div class="table">
                <div class="row">
                    <div class="day">Mon</div>
                    <div>8am &mdash; 8pm</div>
                </div>
                <div class="row">
                    <div class="day">Tue</div>
                    <div>8am &mdash; 8pm</div>
                </div>
                <div class="row">
                    <div class="day">Wed</div>
                    <div>8am &mdash; 5pm</div>
                </div>
                <div class="row">
                    <div class="day">Thu</div>
                    <div>8am &mdash; 8pm</div>
                </div>
                <div class="row">
                    <div class="day">Fri</div>
                    <div>8am &mdash; 8pm</div>
                </div>
                <div class="row">
                    <div class="day">Sat</div>
                    <div>9am &mdash; 6pm</div>
                </div>
                <div class="row">
                    <div class="day">Sun</div>
                    <div>11am &mdash; 6pm</div>
                </div>
              </div>

This is a screenshot of the book, including what the site is supposed to look like.

This is what my website looks like.

Answer 1

也许使用CSS flexbox对齐它们。像这样：

<style>
    .wrapper-box {
        display: flex;
        justify-content: space-between;
    }
</style>

<div class="wrapper-box">

    <div>
        <h2>Hours</h2>
        <div class="table">
            <div class="row">
                <div class="day">Mon</div>
                <div>8am &mdash; 8pm</div>
            </div>
            <div class="row">
                <div class="day">Tue</div>
                <div>8am &mdash; 8pm</div>
            </div>
            <div class="row">
                <div class="day">Wed</div>
                <div>8am &mdash; 5pm</div>
            </div>
            <div class="row">
                <div class="day">Thu</div>
                <div>8am &mdash; 8pm</div>
            </div>
            <div class="row">
                <div class="day">Fri</div>
                <div>8am &mdash; 8pm</div>
            </div>
            <div class="row">
                <div class="day">Sat</div>
                <div>9am &mdash; 6pm</div>
            </div>
            <div class="row">
                <div class="day">Sun</div>
                <div>11am &mdash; 6pm</div>
            </div>
        </div>
    </div>

    <figure id="contentstart">
        <img src="images/cone.jpg" height="301" width="200" alt="a monarch butterfly on a purple coneflower">
        <figcaption>Purple Coneflower</figcaption>
    </figure>

</div>

希望它对您有帮助。

如何将带有类表的div移动到图片旁边？

1 个答案: