Question

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

我尝试左右浮动，但无法定位。

我一直在摆弄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设置为两个div，以使它们彼此相邻。

此外，我建议你使用百分比或margin-left:auto，margin-right:auto来对齐你的div /设置边距，如果不是这样，调整大小的内容和文字看起来不太好。

Answer 2

您的边距正在推动框 - relative位置将元素保留在文档的流中。换句话说，如果两个元素彼此相对定位（包括边距），则它们不能占据相同的空间。

更简单的实现方法是创建一个包装器div，然后使用display: table和table-cell来对齐这两个内容框并使它们具有相同的大小。

你的HTML会像......

<div id="wrapper>
  <div class="game">
    <p>Some content here</p>
  </div>
  <div class="equation">
    <p>More content here</p>
  </div>
</div>

CSS ......

#wrapper {
    display:table;
    max-width:100%;
    height:auto;
}
#wrapper > div {
    display:table-cell;
    width:50%;
    padding:10px;
    border:1px solid black;  /* this just shows where the cells are */
}

Updated Fiddle

它更干净，更容易管理内联内容而不使用棘手的浮动定位。当然，您可以像使用阴影等原样设置每个单元格的样式。这只是为了让您走上正确的轨道。

HTML div上的不同CSS行为

2 个答案: