Question

对于我的项目，我正在创建一个允许用户绘制图片的应用程序。

我设法创建画布和画笔，并且已经知道如何使用Javascript和Jquery。

我遇到的唯一问题是创建调色板。

HTML

<div id = "colors">
    <div style="background: #990000;"></div>
    <div style="background: #CC0000;"></div>
    <div style="background: #CC3300;"></div>
    <div style="background: #FFCC00;"></div>
    <div style="background: #FFFF00;"></div>
    <div style="background: #CCFF00;"></div>
    <div style="background: #66FF00;"></div>
    <div style="background: #003300;"></div>
    <div style="background: #33FFCC;"></div>
    <div style="background: #3300CC;"></div>
    <div style="background: #660033;"></div>
    <div style="background: #660066;"></div>
    <div style="background: #000000;"></div>
    <div style="background: #ffffff;"></div>
</div>

application.css

#colors {
  width: 180px;
  height: 30px;
}

我创造了一个小提琴

http://jsfiddle.net/fqfbprd7/1/

如果我在div中添加一些文字，就像我在小提琴中所做的那样，我会看到渲染的颜色，但它们都在各自的行上。与paint类似，这应该是一个颜色选择框，每行有7种颜色。只是颜色，没有文字。

我甚至为我的颜色div设置了width和height属性，以渲染一个颜色框。

Answer 1

在 #colors 中定位DIV并使用 inline-block 的位置属性值，让它们显示在eahch other旁边。< / p>

 #colors div {
      display: inline-block;

}

#colors {
   width: 180px;
   height: 30px;
 }

 #colors div {
      display: inline-block;
}

<div id ="colors">
    <div style="background: #990000">A</div>
    <div style="background: #CC0000">B</div>
	<div style="background: #CC3300">C</div>
	<div style="background: #FFCC00">D</div>
	<div style="background: #FFFF00">E</div>
	<div style="background: #CCFF00">F</div>
	<div style="background: #66FF00">G</div>
	<div style="background: #003300">H</div>
	<div style="background: #33FFCC">I</div>
	<div style="background: #3300CC">J</div>
	<div style="background: #660033">K</div>
	<div style="background: #660066">L</div>
	<div style="background: #000000">M</div>
	<div style="background: #ffffff">N</div>
</div>

Answer 2

这里有更新的小提琴：

http://jsfiddle.net/fqfbprd7/2/

#colors div {
   width: 25px;
   height: 30px;
    float: left;
 }

无法创建调色板

2 个答案: