Question

可能是超级基本的问题，但是，当raphael创建论文时，为什么表格第一个div上的文字会出现问题呢？

<!DOCTYPE HTML>
<html>
  	<head>
  		<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
  		<script type="text/javascript" src="../js/raphael-min.js"></script>
  		<script type="text/javascript">
	  		$(document).ready(function()  {
	  			 raph = new Raphael('canvas_container', 600, 600);
	  		});
  		</script>
  		<title>Simple JS Page</title>
  	</head>
  	<body>
  		<br>
		<div style="width: 100%; display: table;">
		    <div style="display: table-row">
                        <div id="text_container" style="height:600px;width:300px;border: 8px solid #f7f7f7;display:table-cell;-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;vertical-align:text-top;">
			    why am I in the bottom???
	    		</div>
	    		<div id="separator" style="height:600px;width:10px;display:table-cell">
	    		</div>
	    		<div id="canvas_container" style="height:600px;width:600px;border: 8px solid #f7f7f7;display: table-cell;-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;">
	    		</div> 
			</div>
		</div>
	</body>
</html>

Answer 1

所有的表模仿css都在阻碍。看起来你正在尝试创建两个垂直div，一个300px宽，另一个600px宽，10px分隔符。使用浮动可以完成同样的事情，并且它与Raphael一起玩得更好。

#text_container, #separator, #canvas_container{
    float: left;
}

小提琴：http://jsfiddle.net/q0aka3s6/

raphael将div内容降低

1 个答案: