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

【问题标题】：How to put a canvas and a list in the same div如何将画布和列表放在同一个div中
【发布时间】：2020-10-07 13:15:23
【问题描述】：

我是 css3 和 html5 的新手。我有几个画布，每个画布都有列表形式的文本描述。我想将每个画布及其描述列表放在同一个 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;
}

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

【问题讨论】：

标签： css html5-canvas html-lists

【解决方案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%;
}

【讨论】：