如何将画布和列表放在同一个div中？

Question

我是css3和html5的新手。我有几个画布，每个画布都有列表形式的文本描述。我想把每个canvas和它的描述列表放在同一个div中。我现在的做法是画布总是在列表下面。当我有更多的对子时，所有列表一起出现在顶部，画布出现在它们下面。

html5代码。

<div class="detail-section">
     <div class="detail-section-text">
        <p class="detail-section-text-title">Description</p>
        <ul>
            <li id="Descriptiontext"></li>
        </ul>
    </div>
    <canvas class="detail-section-canvas" id="canvas1"></canvas>
</div>

CSS代码：

.detail-section {
    margin: 2em 2em 2em 2em;
    width: 40%;
}

.detail-section-text {
    display: inline-block;
}

.detail-section-canvas {
    width: 60%;
    padding: 1em;
    width: 20%;
    height: 20%;
}

.detail-section-text-title {
    font-weight: bolder;
}

如何将列表放在左边，画布放在右边？

Answer 1

应该把画布放在右边，文字放在左边。

.detail-section-text {
    display: inline-block;
    left: 0%;
}
.detail-section-canvas {
    width: 60%;
    padding: 1em;
    width: 20%;/* I don't think you meant to have 2 width deceleration's, pick whatever one is right*/
    height: 20%;
    left: 50%;
}