时间戳

首页 > 解决方案 > 如何将画布和列表放在同一个div中

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

问题描述

我是 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;
}

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

标签： csshtml5-canvashtml-lists

解决方案

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

.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%;
}

推荐阅读