html - HTML div 上的不同 CSS 行为

Question

我的 CSS 有几个问题。首先，我试图让两个相邻的框保持在网页中间。尽管右边的框(绿色文本)工作得很好，但左边的框不仅超出了窗口的范围，而且也无法正确定位。

我尝试左右浮动以及定位都无济于事。

http://jsfiddle.net/XEUbc/1522/

我一直在摆弄 CSS，所以可能会有一些无用的 CSS 零碎。

.game {


/*  width: 50%;*/
color: orange;
border: 1px solid #ccc;
border-radius: 4px;
position:relative;
/*float:left;*/
top:35px;
right:50%;
bottom:0;
max-width:600px;
min-width:500px;
margin:70px 20px 20px 20px;
overflow-y:auto;
/*overflow-x:hidden;*/
-webkit-box-shadow:0 0 25px rgba(0,0,0,0.14);
-moz-box-shadow:0 0 25px rgba(0,0,0,0.14);
box-shadow:0 0 25px rgba(0,0,0,0.14)
}

.equation{
/*position: fixed;

/*width: 50%;*/
/*float:right;*/
/*float:right;*/
color: green;   
border: 1px solid #ccc;
border-radius: 4px;
position:relative;
top:35px;
left:50%;
/*right:0;*/
bottom:0;
max-width:600px;
min-width:500px;
margin:70px 20px 20px 20px;
overflow-y:auto;
overflow-x:hidden;
-webkit-box-shadow:0 0 25px rgba(0,0,0,0.14);
-moz-box-shadow:0 0 25px rgba(0,0,0,0.14);
box-shadow:0 0 25px rgba(0,0,0,0.14)

Answer 1

哇，单个元素的 CSS 太多了。

您可以尝试为右侧和左侧 div 设置 float 左侧并将它们包装在一个容器中，为每个设置宽度以使它们并排放置。

或者您可以为两个 div 设置 display:inline-block 并设置 vertical-align:top 以使它们并排放置。

此外，我建议您使用百分比或 margin-left:auto、margin-right:auto 来对齐您的 div/set 边距，如果不是的话，它不会调整大小后的内容和文本看起来不错。